*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:#0a0a0a;--surface:#141414;--surface2:#1e1e1e;--surface3:#2a2a2a;
      --accent:#c8c8c8;--accent2:#8a8a8a;--danger:#e05252;--green:#3dd68c;
      --text:#e8e8e8;--text2:#8a8a8a;--border:rgba(255,255,255,0.08);
      --on-accent:#0a0a0a;
      --radius:12px;--shadow:0 8px 32px rgba(0,0,0,0.55);
      /* Cruz de ferramenta: contorno preto + miolo branco + ponto accent — legível em qualquer mapa */
      --tool-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2v28M2 16h28' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M16 2v28M2 16h28' fill='none' stroke='%23fff' stroke-width='3.25' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23c8c8c8' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23fff'/%3E%3C/svg%3E") 16 16, crosshair;
    }
    html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
      font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none}

    /* Chrome da UI só após auth + mapa — evita flash de botões privilegiados no reload */
    body:not(.chrome-ready) #fab-left,
    body:not(.chrome-ready) #side-tools,
    body:not(.chrome-ready) #btn-settings,
    body:not(.chrome-ready) #settings-menu,
    body:not(.chrome-ready) #category-menu,
    body:not(.chrome-ready) #conv-dock,
    body:not(.chrome-ready) #alert-monitor-dock,
    body:not(.chrome-ready) #btn-monitor-show,
    body:not(.chrome-ready) #current-user-chip,
    body:not(.chrome-ready) #draw-toolbox,
    body:not(.chrome-ready) #draw-toolpanel,
    body:not(.chrome-ready) #map-page-bar,
    body:not(.chrome-ready) #zoom-badge{
      visibility:hidden!important;opacity:0!important;pointer-events:none!important;
    }

    /* Viewer */
    #osd-container{position:fixed;inset:0;background:#0d0d0d;touch-action:none}
    #osd-container .openseadragon-container,
    #osd-container .openseadragon-canvas{touch-action:none}
    #annotation-layer{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:visible}
    #draw-surface{position:fixed;inset:0;z-index:7;display:none;cursor:var(--tool-cursor);touch-action:none}
    body.draw-mode #draw-surface{display:block}
    #doc-view{position:fixed;inset:0;background:#0d0d0d;display:none;overflow:auto;padding:10px 0 92px;z-index:1;touch-action:none;cursor:grab;
      scrollbar-width:none;-ms-overflow-style:none}
    #doc-view::-webkit-scrollbar{display:none}
    #doc-view.dragging{cursor:grabbing}
    body.doc-mode #doc-view{display:block}
    body.doc-mode #osd-container{display:none}
    #doc-toolbar{display:none}
    /* Outer wrapper centers the page row on any screen size. Uses min-height/
       min-width (not fixed height/width) so it only ever grows to fit content
       that's larger than the viewport — the classic flexbox-center trick that
       avoids clipping the start of oversized content when scrolling. */
    #doc-pages{display:flex;flex-direction:column;align-items:center;justify-content:center;
      overflow:visible;padding:0 0 12px;width:max-content;min-width:100%;min-height:100%;
      transform-origin:center center}
    .doc-row{display:flex;flex-direction:row;gap:0;align-items:flex-start}
    .doc-page-card{background:none;border:none;border-radius:0;padding:0;box-shadow:none;cursor:pointer;flex:0 0 auto;position:relative}
    .doc-page-card canvas{display:block;max-width:none;height:auto;background:#fff}
    .doc-page-card + .doc-page-card{margin-left:-1px}
    .doc-page-card.single{padding:0 12px}
    .doc-page-meta{position:absolute;left:10px;bottom:10px;background:rgba(10,10,10,.78);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px 10px;font-size:11px;color:#fff;text-align:center}

    /* ── FAB cluster (bottom center) ── */
    #fab-left{position:fixed;left:50%;bottom:max(16px, env(safe-area-inset-bottom, 0px));
      transform:translateX(-50%);
      display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
      gap:10px;z-index:100;max-width:min(100vw - 96px, 560px);
      padding-left:env(safe-area-inset-left, 0px);padding-right:env(safe-area-inset-right, 0px);
      box-sizing:border-box;transition:opacity .3s,bottom .2s,max-width .2s}
    .fab{width:48px;height:48px;border-radius:14px;
      background:rgba(20,20,20,.94);backdrop-filter:blur(12px);
      border:1px solid var(--border);color:var(--text);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:background .15s,transform .12s,border-color .15s;
      -webkit-tap-highlight-color:transparent;user-select:none}
    .fab:hover{background:var(--surface3)}
    .fab:active{transform:scale(.92)}
    .fab.active{background:var(--accent);border-color:transparent;color:var(--on-accent)}
    .fab svg{width:20px;height:20px;flex-shrink:0}
    #btn-shortcuts{position:relative}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;
      border:1px solid var(--border);background:var(--surface2);color:var(--text);
      font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,transform .1s;
      -webkit-tap-highlight-color:transparent;user-select:none;white-space:nowrap}
    .btn:hover{background:var(--surface3)}.btn:active{transform:scale(.96)}
    .btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}
    .btn.primary:hover{background:#e8e8e8;color:var(--on-accent)}
    .btn.danger{background:var(--danger);border-color:transparent}
    .btn.active{background:var(--accent);border-color:transparent;color:var(--on-accent)}
    .btn svg{width:15px;height:15px;flex-shrink:0}

    /* ── Side Panel (bottom center) ── */
    .side-panel{position:fixed;left:50%;top:50%;width:min(460px,calc(100vw - 24px));max-height:min(74vh,680px);
      background:var(--surface);border:1px solid var(--border);border-radius:18px;
      transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;
      transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:110;
      display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
    .side-panel.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
    /* Panel backdrop */
    #panel-backdrop{position:fixed;inset:0;z-index:109;display:none;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
    #panel-backdrop.show{display:block}
    .side-panel header{padding:16px;border-bottom:1px solid var(--border);
      font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
    .side-panel header span{flex:1}
    .panel-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px}
    .user-chip,#current-user-chip{position:fixed;top:12px;left:12px;z-index:120;display:flex;align-items:center;gap:8px;
      background:rgba(10,10,10,.88);border:1px solid var(--border);border-radius:999px;padding:6px 10px;cursor:pointer;
      color:#e8e8e8!important;-webkit-text-fill-color:#e8e8e8;appearance:none;-webkit-appearance:none}
    .user-chip-badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      color:#fff!important;-webkit-text-fill-color:#fff;font-size:12px;font-weight:800;flex-shrink:0}
    .user-chip-meta{display:flex;flex-direction:column;min-width:0;color:#e8e8e8!important;-webkit-text-fill-color:#e8e8e8}
    .user-chip-name{font-size:11px;font-weight:700;line-height:1.1;white-space:nowrap;color:#e8e8e8!important;-webkit-text-fill-color:#e8e8e8}
    .user-chip-role{font-size:10px;color:#8b90a0!important;-webkit-text-fill-color:#8b90a0;line-height:1.1;white-space:nowrap}
    .chip-preview-tag{font-size:10px;font-weight:700;color:var(--on-accent);background:var(--accent);
      border-radius:999px;padding:3px 9px;white-space:nowrap;margin-left:2px}
    .annot-item,.user-item,.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:rgba(255,255,255,.02);margin-bottom:8px}
    .annot-item:hover,.user-item:hover,.notif-item:hover{border-color:var(--border);background:rgba(255,255,255,.04)}
    .user-avatar,.notif-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;flex-shrink:0}
    .annot-swatch{width:28px;height:28px;border-radius:8px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
    .notif-item.unread{border-color:rgba(200,200,200,.38);background:rgba(200,200,200,.08)}
    .alert-monitor-card{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);padding:12px;margin-bottom:10px;
      transition:border-color .15s,background .15s}
    .alert-monitor-card.pending{border-color:rgba(247,136,79,.45);background:rgba(247,136,79,.07);
      box-shadow:inset 3px 0 0 #f7884f}
    .alert-monitor-card.seen{border-color:rgba(79,247,160,.35);background:rgba(79,247,160,.06);
      box-shadow:inset 3px 0 0 #4ff7a0}
    .alert-monitor-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
    .alert-monitor-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:4px;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
    .alert-monitor-card.pending .alert-monitor-dot{animation:monitorPulse 1.6s ease infinite}
    .alert-monitor-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35}
    .alert-monitor-meta{font-size:11px;color:var(--text2);margin-top:3px;line-height:1.4}
    .alert-monitor-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;margin-top:8px}
    .alert-monitor-status.pending{color:#ffb078;background:rgba(247,136,79,.14)}
    .alert-monitor-status.seen{color:#7dffb8;background:rgba(79,247,160,.12)}
    .alert-monitor-viewers{display:flex;flex-direction:column;gap:6px;margin-top:10px}
    .alert-monitor-waiting{padding:10px 12px;border-radius:8px;font-size:12px;color:#ffb078;
      background:rgba(247,136,79,.08);border:1px dashed rgba(247,136,79,.35)}
    .alert-monitor-viewer{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:rgba(0,0,0,.18);font-size:12px}
    .alert-monitor-viewer-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#4ff7a0;color:#0b1a12;font-size:10px;font-weight:800;flex-shrink:0}
    .alert-monitor-viewer strong{color:var(--text);display:block;font-size:12px}
    .alert-monitor-viewer span{color:var(--text2);font-size:11px}
    .alert-activity-box{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);
      padding:8px;max-height:280px;overflow-y:auto;margin-bottom:8px}
    .alert-activity-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;
      border:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.18);margin-bottom:6px;
      transition:border-color .15s,background .15s}
    .alert-activity-item:last-child{margin-bottom:0}
    .alert-activity-item.kind-create{border-color:rgba(200,200,200,.22)}
    .alert-activity-item.kind-view{border-color:rgba(79,247,160,.22)}
    .alert-activity-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
    .alert-activity-who{font-size:12px;font-weight:700;color:var(--text);min-width:0;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .alert-activity-time{font-size:10px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums;flex-shrink:0}
    .alert-activity-msg{font-size:11px;color:var(--text2);line-height:1.4;margin-top:2px}
    .alert-activity-scope{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10px;font-weight:700;
      color:var(--accent);background:rgba(200,200,200,.12);padding:2px 7px;border-radius:999px}
    .log-toolbar{margin:0 0 8px}
    .alert-activity-item .log-del-btn,
    .notif-item .log-del-btn{
      flex-shrink:0;align-self:center;padding:4px 8px;font-size:11px;opacity:.75}
    .alert-activity-item .log-del-btn:hover,
    .notif-item .log-del-btn:hover{opacity:1;border-color:rgba(247,79,79,.45);color:#ff8f8f}
    #alert-monitor-dock{position:fixed;top:52px;right:12px;z-index:125;width:min(340px,calc(100vw - 24px));
      pointer-events:none}
    #alert-monitor-dock:not(.hidden){pointer-events:auto}
    .monitor-dock-panel{background:rgba(10,10,10,.94);border:1px solid var(--border);border-radius:14px;
      box-shadow:0 14px 44px rgba(0,0,0,.5);backdrop-filter:blur(14px);overflow:hidden;
      animation:monitorDockIn .28s ease}
    @keyframes monitorDockIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
    .monitor-dock-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
      padding:11px 12px;border-bottom:1px solid var(--border);
      background:linear-gradient(180deg,rgba(200,200,200,.08),transparent)}
    .monitor-dock-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
      letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
    .monitor-dock-pulse{width:8px;height:8px;border-radius:50%;background:#4ff7a0;
      box-shadow:0 0 0 0 rgba(79,247,160,.55);animation:monitorPulse 1.6s ease infinite}
    @keyframes monitorPulse{
      0%{box-shadow:0 0 0 0 rgba(79,247,160,.55)}
      70%{box-shadow:0 0 0 8px rgba(79,247,160,0)}
      100%{box-shadow:0 0 0 0 rgba(79,247,160,0)}
    }
    .monitor-dock-actions{display:flex;gap:4px}
    .monitor-dock-btn{padding:3px 8px!important;min-width:28px;font-size:12px}
    .monitor-dock-stats{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.16)}
    .monitor-stat-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
      letter-spacing:.02em;padding:4px 8px;border-radius:999px;background:var(--surface2);color:var(--text2);
      border:1px solid rgba(255,255,255,.05)}
    .monitor-stat-chip strong{color:var(--text);font-variant-numeric:tabular-nums}
    .monitor-stat-chip.warn{color:#ffb078;background:rgba(247,136,79,.12);border-color:rgba(247,136,79,.25)}
    .monitor-stat-chip.warn strong{color:#ffb078}
    .monitor-stat-chip.ok{color:#7dffb8;background:rgba(79,247,160,.1);border-color:rgba(79,247,160,.22)}
    .monitor-stat-chip.ok strong{color:#7dffb8}
    .monitor-dock-feed{max-height:min(46vh,380px);overflow-y:auto;padding:8px;scrollbar-gutter:stable}
    .monitor-dock-feed .alert-activity-item{margin-bottom:6px}
    .monitor-dock-feed .alert-activity-item.fresh{border-color:rgba(79,247,160,.45);background:rgba(79,247,160,.1);
      animation:monitorFresh .9s ease}
    @keyframes monitorFresh{from{background:rgba(79,247,160,.24)}to{background:rgba(79,247,160,.1)}}
    .monitor-dock-empty{padding:22px 12px;text-align:center;font-size:12px;color:var(--text2);line-height:1.45}
    .monitor-dock-restore{position:fixed;top:52px;right:12px;z-index:125;display:inline-flex;align-items:center;
      justify-content:center;gap:6px;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);
      background:rgba(16,18,28,.92);color:var(--text);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);
      backdrop-filter:blur(10px)}
    .monitor-dock-restore:hover{background:var(--surface3)}
    .monitor-dock-restore svg{width:18px;height:18px}
    .monitor-dock-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
      border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;
      display:inline-flex;align-items:center;justify-content:center}
    .monitor-dock-restore.hidden,#alert-monitor-dock.hidden{display:none!important}
    @media (max-width:640px){
      #alert-monitor-dock{width:min(300px,calc(100vw - 20px));top:52px;right:10px}
      .monitor-dock-feed{max-height:34vh}
      .monitor-dock-restore{top:52px;right:10px}
    }

    /* Scrollbars no tema (Firefox + WebKit) */
    *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--accent) 55%, transparent) rgba(255,255,255,.04)}
    *::-webkit-scrollbar{width:8px;height:8px}
    *::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:8px}
    *::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent) 50%, transparent);border-radius:8px;border:2px solid transparent;
      background-clip:padding-box}
    *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent) 75%, transparent);border:2px solid transparent;background-clip:padding-box}
    *::-webkit-scrollbar-corner{background:transparent}
    .panel-body::-webkit-scrollbar,
    .monitor-dock-feed::-webkit-scrollbar,
    .alert-activity-box::-webkit-scrollbar,
    .side-panel .panel-body::-webkit-scrollbar{width:7px}
    .panel-body::-webkit-scrollbar-thumb,
    .monitor-dock-feed::-webkit-scrollbar-thumb,
    .alert-activity-box::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent) 52%, transparent);border-radius:8px;
      border:2px solid transparent;background-clip:padding-box}
    .panel-body::-webkit-scrollbar-track,
    .monitor-dock-feed::-webkit-scrollbar-track,
    .alert-activity-box::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:8px}
    .mini-note{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.45}
    .pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    .mini-pill{font-size:10px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--surface2);color:var(--text2)}
    .mini-pill.pill-inactive{background:rgba(224,82,82,.18);color:var(--danger)}
    .mini-pill.pill-token-active{background:rgba(61,214,140,.18);color:var(--green)}
    .user-item.inactive{opacity:.55}
    .user-item.editing{border-color:rgba(200,200,200,.55);background:rgba(200,200,200,.1)}
    .user-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;flex-shrink:0}
    .user-actions .use-btn{font-size:11px;padding:5px 10px}
    .user-actions .del-btn{align-self:center}
    #user-search{width:100%;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;outline:none}
    #notify-recipient,#user-role,#org-category-select,#org-subgroup-select,#user-category-select,#user-subgroup-select,#access-type-level{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;outline:none}
    .org-card{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);padding:12px;margin-bottom:12px}
    .org-card-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:10px}
    .form-section-title{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);margin:18px 0 10px;padding-top:12px;border-top:1px solid var(--border)}
    .form-section-title:first-of-type{margin-top:8px;padding-top:0;border-top:none}
    .admin-acct-profile-editor{padding:12px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.2)}
    .map-pick-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto;
      padding:8px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.18)}
    .map-pick-list:empty::after{content:'Nenhum mapa importado';display:block;font-size:12px;color:var(--text2);padding:6px}
    .map-pick-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
      border:1px solid transparent;cursor:pointer;font-size:13px;color:var(--text)}
    .map-pick-item:hover{background:rgba(255,255,255,.04)}
    .map-pick-item:has(input:checked){border-color:rgba(200,200,200,.35);background:rgba(200,200,200,.08)}
    .map-pick-item input{accent-color:var(--accent);flex-shrink:0}
    .map-pick-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .org-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
    .org-tree{display:flex;flex-direction:column;gap:8px;margin-top:10px}
    .org-group{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;background:rgba(0,0,0,.12)}
    .org-group.active{border-color:rgba(200,200,200,.55);background:rgba(200,200,200,.08)}
    .org-group-name{font-size:12px;font-weight:800}
    .org-subgroup-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.035);font-size:12px;cursor:pointer}
    .org-subgroup-row.active{outline:1px solid var(--accent);background:rgba(200,200,200,.14)}
    #users-panel{width:min(680px,calc(100vw - 24px));max-height:min(90vh,880px)}
    /* Tabbed panels */
    .panel-tabs{display:flex;gap:4px;padding:8px 10px 0;border-bottom:1px solid var(--border);flex-shrink:0}
    .panel-tabs button{flex:1;padding:9px 8px;background:none;border:none;border-bottom:2px solid transparent;
      color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;border-radius:8px 8px 0 0;
      transition:color .12s,border-color .12s,background .12s}
    .panel-tabs button:hover{color:var(--text);background:var(--surface2)}
    .panel-tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
    .tab-page{display:none}
    .tab-page.active{display:block}
    .user-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px}
    .perm-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--border);
      border-radius:9px;background:rgba(255,255,255,.02);margin-bottom:6px;cursor:pointer}
    .perm-item input{margin-top:2px;accent-color:var(--accent);flex-shrink:0}
    .perm-text{display:flex;flex-direction:column;gap:2px}
    .perm-name{font-size:12px;font-weight:700;color:var(--text)}
    .perm-desc{font-size:11px;color:var(--text2);line-height:1.4}
    .perm-item.perm-admin{border-color:rgba(247,136,79,.4);background:rgba(247,136,79,.06)}
    .org-person-list{display:flex;flex-direction:column;gap:5px;margin-top:6px}
    .org-person-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-radius:7px;background:rgba(0,0,0,.16);font-size:11px;color:var(--text2);cursor:pointer}
    .org-person-pill strong{color:var(--text);font-size:11px}
    .admin-page-hint{font-size:12px;color:var(--text2);line-height:1.45;margin-top:-4px;margin-bottom:10px}
    .annotation-path{fill:none;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:multiply}
    .annotation-area{stroke-linejoin:round;mix-blend-mode:multiply;cursor:pointer}
    .annotation-area.selected{stroke:#fff;stroke-dasharray:10 7;filter:drop-shadow(0 0 6px rgba(255,255,255,.45))}
    /* Transparency is controlled per-stroke via the stroke-opacity attribute
       (a CSS `opacity` here would override it and ignore the intensity slider). */
    .annotation-path.preview{stroke-dasharray:12 8}
    .annotation-sticker{pointer-events:none}
    .tool-row{display:flex;gap:8px;flex-wrap:wrap}
    .tool-btn{flex:1;min-width:86px;justify-content:center}
    .range-wrap{display:flex;align-items:center;gap:10px}
    .range-wrap input[type=range]{flex:1}
    .range-value{font-size:11px;color:var(--text2);min-width:40px;text-align:right}
    .audience-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
    .audience-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text)}
    .audience-item input{accent-color:var(--accent)}
    .sticker-preview{display:flex;align-items:center;justify-content:center;min-height:92px;border:1px dashed var(--border);border-radius:10px;background:rgba(255,255,255,.03);overflow:hidden}
    .sticker-preview img{max-width:100%;max-height:88px;display:block}
    .sticker-library{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
    .sticker-tile{height:48px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
    .sticker-tile.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,200,200,.24)}
    .sticker-tile img{max-width:40px;max-height:40px;display:block}
    .layer-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
    .layer-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03);font-size:12px}
    .layer-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .layer-item input{accent-color:var(--accent)}
    .emoji-picker{display:none;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px;padding:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px}
    .emoji-picker.open{display:grid}
    .emoji-picker button{height:32px;border:0;border-radius:6px;background:rgba(255,255,255,.04);font-size:18px;cursor:pointer}
    #login-overlay{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(8,9,14,.86);backdrop-filter:blur(10px)}
    #login-overlay.open{display:flex}
    #login-card{width:min(380px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:22px}
    #login-card h2{font-size:18px;margin-bottom:14px}

    /* Tela de token inválido / expirado (estilo 404) */
    #token-gate{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;
      padding:28px 20px;background:
        radial-gradient(1200px 600px at 50% -10%, rgba(224,82,82,.22), transparent 55%),
        radial-gradient(800px 500px at 80% 100%, rgba(200,200,200,.12), transparent 50%),
        #0a0a0a}
    #token-gate.open{display:flex}
    body.token-gate-open #fab-left,
    body.token-gate-open #side-tools,
    body.token-gate-open #btn-settings,
    body.token-gate-open #osd-container,
    body.token-gate-open #doc-view,
    body.token-gate-open .monitor-dock,
    body.token-gate-open #btn-monitor-show,
    body.token-gate-open #loading,
    body.token-gate-open #login-overlay,
    body.token-gate-open #conv-dock{display:none!important;pointer-events:none!important}
    .token-gate-card{width:min(520px,100%);text-align:center}
    .token-gate-code{font-size:clamp(72px,18vw,120px);font-weight:800;line-height:1;letter-spacing:-.04em;
      color:rgba(224,82,82,.9);text-shadow:0 0 40px rgba(224,82,82,.35);margin-bottom:8px}
    #token-gate h1{font-size:clamp(26px,6vw,40px);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:#fff}
    .token-gate-lead{font-size:clamp(16px,3.6vw,20px);color:#e8e8e8;margin:0 0 16px;line-height:1.35;font-weight:600}
    .token-gate-msg{font-size:15px;color:var(--text2);line-height:1.55;margin:0 auto;max-width:28em}
    .token-gate-msg strong{color:#fff}
    .token-gate-meta{margin-top:22px;font-size:12px;color:var(--text2);padding:10px 14px;border:1px solid var(--border);
      border-radius:10px;background:rgba(255,255,255,.03);display:inline-block}
    .password-field{position:relative;display:flex;align-items:center}
    .password-field input{width:100%;padding-right:44px}
    .password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
      display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;
      background:transparent;color:var(--text2);cursor:pointer;padding:0}
    .password-toggle:hover{color:var(--text);background:rgba(255,255,255,.06)}
    .password-toggle svg{width:18px;height:18px}
    .password-toggle .eye-closed[hidden],.password-toggle .eye-open[hidden]{display:none!important}
    .caps-lock-hint{margin-top:8px;padding:7px 10px;border-radius:8px;border:1px solid rgba(247,226,79,.4);
      background:rgba(247,226,79,.1);color:#f7e24f;font-size:12px;font-weight:600;letter-spacing:.02em}
    .caps-lock-hint[hidden]{display:none!important}
    #ios-push-note{display:none;margin-top:10px;padding:10px;border:1px solid rgba(247,226,79,.35);border-radius:8px;background:rgba(247,226,79,.08);color:#f7e24f;font-size:12px;line-height:1.4}
    body.notify-pick-mode #osd-container,
    body.notify-pick-mode #osd-container .openseadragon-canvas,
    body.notify-pick-mode #osd-container canvas{cursor:var(--tool-cursor)!important}
    body.draw-pan-mode #osd-container,
    body.draw-pan-mode #osd-container .openseadragon-canvas,
    body.draw-pan-mode #osd-container canvas{cursor:grab!important}
    body.draw-pan-mode #osd-container:active,
    body.draw-pan-mode #osd-container:active .openseadragon-canvas,
    body.draw-pan-mode #osd-container:active canvas{cursor:grabbing!important}
    #side-tools{position:fixed;
      left:max(16px, env(safe-area-inset-left, 0px));
      bottom:max(16px, env(safe-area-inset-bottom, 0px));
      z-index:120;display:flex;flex-direction:column;gap:10px;transition:opacity .35s,transform .35s,left .2s,bottom .2s}
    #side-tools.fab-hidden{opacity:1;transform:none;pointer-events:auto}
    .fab-side{position:static}
    #draw-toolbox{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:121;width:62px;
      background:linear-gradient(180deg,rgba(30,30,30,.98),rgba(12,12,12,.98));border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,.58);padding:7px;display:none}
    body.draw-mode #draw-toolbox{display:flex;flex-direction:column;gap:6px}
    .draw-rail-btn{width:100%;height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);
      color:var(--text2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:all .14s}
    .draw-rail-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
    .draw-rail-btn.active{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:0 8px 20px rgba(200,200,200,.35)}
    .draw-rail-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
    .draw-rail-btn svg{width:20px;height:20px}
    .draw-rail-btn span{display:none}
    .draw-rail-sep{height:1px;margin:2px 4px;background:rgba(255,255,255,.12);flex-shrink:0}
    #draw-toolpanel{position:fixed;left:88px;top:50%;transform:translateY(-50%);z-index:121;width:min(390px,calc(100vw - 112px));max-height:min(72vh,620px);
      background:rgba(10,10,10,.96);border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 18px 46px rgba(0,0,0,.58);padding:14px;display:none;overflow:auto}
    body.draw-mode #draw-toolpanel.open{display:block}
    #draw-toolpanel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
    #draw-toolpanel-title{font-size:13px;font-weight:700}
    #erase-mode-row{display:none}
    #draw-toolpanel.erase-mode #erase-mode-row{display:flex}
    #draw-toolpanel.erase-mode .draw-fill-config,
    #draw-toolpanel.erase-mode .draw-fill-style-config,
    #draw-toolpanel.erase-mode .draw-opacity-config,
    #draw-toolpanel.erase-mode .draw-color-config,
    #draw-toolpanel.erase-mode .draw-audience-config,
    #draw-toolpanel.erase-mode .draw-layer-config{display:none}
    .panel-footer{padding:10px;border-top:1px solid var(--border);display:flex;gap:8px}
    .panel-footer .btn{flex:1;justify-content:center}

    /* ── Settings button (fixed bottom-right of menu row) ── */
    #btn-settings{position:fixed;
      right:max(16px, env(safe-area-inset-right, 0px));
      bottom:max(16px, env(safe-area-inset-bottom, 0px));
      z-index:140;
      width:48px;height:48px;border-radius:14px;
      background:var(--accent);border:none;color:var(--on-accent);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;box-shadow:0 4px 16px rgba(200,200,200,.4);
      transition:background .15s,transform .12s,opacity .35s,right .2s,bottom .2s;
      -webkit-tap-highlight-color:transparent;user-select:none;
      opacity:1!important;pointer-events:auto!important}
    #btn-settings:active{transform:scale(.92)}
    #btn-settings svg{width:20px;height:20px}
    #btn-settings.fab-hidden{opacity:1;pointer-events:auto}
    /* Import progress dock — left of settings gear */
    #conv-dock{position:fixed;
      right:calc(76px + env(safe-area-inset-right, 0px));
      bottom:max(16px, env(safe-area-inset-bottom, 0px));
      z-index:141;
      display:flex;flex-direction:column;gap:6px;
      min-width:196px;max-width:min(260px,calc(100vw - 100px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
      padding:10px 12px;border-radius:14px;text-align:left;cursor:pointer;
      background:rgba(10,10,10,.94);backdrop-filter:blur(12px);
      border:1px solid var(--border);color:var(--text);
      box-shadow:0 8px 28px rgba(0,0,0,.4);
      transition:opacity .25s,transform .25s,border-color .15s;
      -webkit-tap-highlight-color:transparent;user-select:none}
    #conv-dock.hidden{display:none!important}
    #conv-dock:hover{border-color:rgba(200,200,200,.45)}
    #conv-dock:active{transform:scale(.98)}
    #conv-dock.done{border-color:rgba(61,214,140,.45)}
    #conv-dock.error{border-color:rgba(248,113,113,.45)}
    .conv-dock-head{display:flex;align-items:center;gap:8px;min-width:0}
    .conv-dock-pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);
      box-shadow:0 0 0 0 rgba(200,200,200,.55);animation:conv-dock-pulse 1.4s ease-out infinite;flex-shrink:0}
    #conv-dock.done .conv-dock-pulse{background:var(--green,#3dd68c);animation:none;box-shadow:none}
    #conv-dock.error .conv-dock-pulse{background:var(--danger,#f87171);animation:none;box-shadow:none}
    @keyframes conv-dock-pulse{
      0%{box-shadow:0 0 0 0 rgba(200,200,200,.55)}
      70%{box-shadow:0 0 0 8px rgba(200,200,200,0)}
      100%{box-shadow:0 0 0 0 rgba(200,200,200,0)}
    }
    .conv-dock-title{flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.02em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .conv-dock-pct{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
    #conv-dock.done .conv-dock-pct{color:var(--green,#3dd68c)}
    #conv-dock.error .conv-dock-pct{color:var(--danger,#f87171)}
    .conv-dock-close{flex-shrink:0;width:22px;height:22px;margin-left:2px;border-radius:6px;
      display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;
      color:var(--text2);opacity:.75}
    .conv-dock-close:hover{opacity:1;background:rgba(255,255,255,.08);color:var(--text)}
    #conv-dock:not(.done):not(.error) .conv-dock-close{display:none}
    .conv-dock-bar-bg{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
    .conv-dock-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));
      border-radius:3px;transition:width .25s ease}
    #conv-dock.done .conv-dock-bar-fill{background:var(--green,#3dd68c)}
    #conv-dock.error .conv-dock-bar-fill{background:var(--danger,#f87171)}
    .conv-dock-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--text2);
      font-variant-numeric:tabular-nums}
    body:has(#conv-dock:not(.hidden)) #toast{bottom:calc(88px + 58px)}
    body:has(#conv-dock:not(.hidden)) #loading:not(.hidden):not(.empty-state){bottom:calc(88px + 58px)}
    body:has(#conv-dock:not(.hidden)):has(#toast.show) #loading:not(.hidden):not(.empty-state){bottom:calc(88px + 58px + 64px)}
    .notify-bell-badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;
      font-size:9px;font-weight:700;border-radius:8px;padding:1px 5px;min-width:15px;text-align:center;line-height:1.4}
    /* Field/token access: notifications are read-only — no composing, no oversight of others. */
    #notify-panel.view-only #notify-compose,
    #notify-panel.view-only #notify-oversight{display:none}
    #settings-menu{position:fixed;
      right:max(16px, env(safe-area-inset-right, 0px));
      bottom:calc(74px + env(safe-area-inset-bottom, 0px));
      z-index:130;
      background:var(--surface);border:1px solid var(--border);border-radius:14px;
      padding:6px;min-width:210px;box-shadow:var(--shadow);
      transform:scale(.9) translateY(8px);transform-origin:bottom right;
      opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
    #settings-menu.open{opacity:1;pointer-events:all;transform:scale(1) translateY(0)}
    .smenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
      border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;
      transition:background .12s;color:var(--text);border:none;background:none;width:100%;text-align:left}
    .smenu-item:hover{background:var(--surface2)}
    .smenu-logout{color:#f87171}
    .smenu-logout:hover{background:rgba(248,113,113,.12);color:#f87171}
    .smenu-logout svg{color:#f87171}
    .smenu-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text2)}
    .smenu-sep{height:1px;background:var(--border);margin:4px 0}
    .smenu-section{padding:2px 0}
    .smenu-section + .smenu-section{margin-top:2px;border-top:1px solid var(--border);padding-top:4px}
    .smenu-section[hidden]{display:none}
    .smenu-label{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
      color:var(--text2);padding:4px 12px 2px;opacity:.7}

    /* Admin quick category switcher — "view as category" for live alert
       oversight, opened from the chip. Deliberately NOT the full user panel. */
    #category-menu{position:fixed;top:56px;left:12px;z-index:130;
      background:var(--surface);border:1px solid var(--border);border-radius:14px;
      padding:6px;min-width:230px;max-width:min(300px,calc(100vw - 24px));
      max-height:min(420px,70vh);overflow-y:auto;box-shadow:var(--shadow);
      transform:scale(.9) translateY(-8px);transform-origin:top left;
      opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
    #category-menu.open{opacity:1;pointer-events:all;transform:scale(1) translateY(0)}
    .smenu-item.active-category{background:var(--surface2);color:var(--accent);font-weight:700}

    /* ── FAB auto-hide ── */
    #fab-left{transition:opacity .35s,transform .35s}
    #fab-left.fab-hidden{opacity:0;transform:translateX(-50%) translateY(64px);pointer-events:none}
    #fab-reveal-zone{
      position:fixed;left:0;right:0;bottom:0;height:88px;z-index:99;
      pointer-events:none;background:transparent;
    }
    body.fabs-hidden #fab-reveal-zone{pointer-events:auto}

    /* Shortcut items */
    .sc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
      cursor:pointer;transition:background .15s;margin-bottom:4px;border:1px solid transparent}
    .sc-item:hover{background:var(--surface2);border-color:var(--border)}
    .sc-item.selected{background:rgba(200,200,200,.12);border-color:var(--accent)}
    .sc-check{display:flex;align-items:center;flex-shrink:0;padding:4px 2px;cursor:pointer}
    .sc-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
    .sc-bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 10px;
      border-bottom:1px solid var(--border);margin-bottom:10px}
    .sc-bulk-all{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;user-select:none}
    .sc-bulk-all input{width:15px;height:15px;accent-color:var(--accent)}
    .sc-bulk-count{font-size:11px;color:var(--accent);font-weight:600;margin-right:auto}
    .sc-bulk-bar .btn{padding:5px 10px;font-size:12px;flex:0 0 auto}
    .sc-bulk-bar .btn:disabled{opacity:.45;cursor:default}
    .sc-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
    .sc-info{flex:1;overflow:hidden}
    .sc-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .sc-meta{font-size:10px;color:var(--text2);margin-top:2px}
    .sc-del{padding:4px;border:none;background:none;cursor:pointer;color:var(--text2);
      border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}
    .sc-del:hover{color:var(--danger);background:rgba(224,82,82,.12)}
    .sc-edit{padding:4px;border:none;background:none;cursor:pointer;color:var(--text2);
      border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}
    .sc-edit:hover{color:var(--accent);background:rgba(200,200,200,.12)}
    .staff-user-item.selected{background:rgba(200,200,200,.14);border-color:var(--accent)}
    .staff-user-item[draggable="true"]{cursor:grab}
    .staff-pin{position:absolute;pointer-events:auto;cursor:pointer;z-index:21;
      display:flex;flex-direction:column;align-items:center;touch-action:manipulation;
      transform:translate(-50%,-50%)}
    .staff-badge{position:relative;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
      justify-content:center;border:3px solid #fff;
      box-shadow:0 2px 10px rgba(0,0,0,.45);flex-shrink:0}
    .staff-badge::before{content:'';position:absolute;inset:-12px;border-radius:50%}
    .staff-badge-logo{font-size:15px;font-weight:700;color:#fff;line-height:1;
      text-shadow:0 1px 2px rgba(0,0,0,.35);max-width:42px;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap;text-align:center}
    .staff-label{position:absolute;top:58px;left:50%;transform:translateX(-50%);
      background:rgba(0,0,0,.72);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;
      white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
    body.labels-visible .staff-label,.staff-pin:hover .staff-label{opacity:1}
    body.staff-place-mode #osd-container,
    body.staff-place-mode #osd-container .openseadragon-canvas,
    body.staff-place-mode #osd-container canvas{cursor:var(--tool-cursor)!important}
    .alert-section-title{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;margin:8px 0}
    /* Compact icon-badge alert marker; tap reveals the message balloon.
       Sized generously so the badge stays tappable and the text stays legible
       on small, high-density phone screens (not just desktop). */
    .alert-pin{position:absolute;pointer-events:auto;cursor:pointer;z-index:22;
      display:flex;flex-direction:column;align-items:center;touch-action:manipulation}
    .alert-badge{position:relative;width:46px;height:46px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      background:currentColor;border:3px solid #fff;
      box-shadow:0 0 0 2.5px currentColor,0 3px 10px rgba(0,0,0,.5);
      animation:alertCore 1.05s ease-in-out infinite}
    /* Invisible larger hit-zone — the visible badge stays compact, but the
       tappable area is bigger and more forgiving on a phone screen. */
    .alert-badge::before{content:'';position:absolute;inset:-14px;border-radius:50%}
    /* Radar-style expanding ring — the original, more alarming pulse effect. */
    .alert-badge::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;
      border-radius:50%;transform:translate(-50%,-50%) scale(.6);pointer-events:none;
      border:3px solid color-mix(in srgb,currentColor 88%,white 12%);
      box-shadow:0 0 0 6px color-mix(in srgb,currentColor 20%,transparent);
      animation:alertRadar 1.6s cubic-bezier(.18,.62,.2,1) infinite}
    .alert-badge svg{position:relative;z-index:1;width:23px;height:23px;fill:#fff;flex-shrink:0}
    .alert-pin.expanded .alert-badge{animation:none;box-shadow:0 0 0 3px #fff,0 3px 10px rgba(0,0,0,.5)}
    .alert-pin.expanded .alert-badge::after{animation:none;opacity:0}
    /* Após visualização: marca-d'água fixa no local (sem piscar) = alerta atendido */
    .alert-pin.seen{opacity:var(--alert-seen-opacity, .48);filter:grayscale(.25);z-index:18}
    .alert-pin.seen .alert-badge{
      animation:none!important;transform:scale(.78)!important;filter:none;
      opacity:.72;border:2px solid rgba(255,255,255,.45);
      box-shadow:0 1px 6px rgba(0,0,0,.3);
      background:color-mix(in srgb,currentColor 42%,#6b7280 58%)}
    .alert-pin.seen .alert-badge::after{animation:none!important;opacity:0!important;display:none!important}
    .alert-pin.seen .alert-badge svg{opacity:.8;transform:scale(.92)}
    .alert-pin.seen.expanded{opacity:var(--alert-seen-expanded-opacity, .92);filter:none}
    .alert-pin.seen.expanded .alert-badge{opacity:1;transform:scale(.9)!important}
    .alert-balloon{position:absolute;bottom:calc(100% + 10px);left:50%;
      transform:translateX(-50%) scale(.82);transform-origin:bottom center;
      opacity:0;pointer-events:none;transition:opacity .13s ease-out,transform .13s ease-out;
      display:flex;flex-direction:column;align-items:stretch;gap:0;
      width:max-content;max-width:min(78vw,300px);min-width:0;padding:12px 14px;border-radius:14px;
      background:#fff;color:#101018;border:3px solid #101018;
      box-sizing:border-box;
      box-shadow:3px 3px 0 rgba(16,16,24,.92),0 10px 26px rgba(0,0,0,.4)}
    .alert-balloon-text{font-size:15px;font-weight:700;line-height:1.45;
      white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;hyphens:manual}
    .alert-balloon-photo{display:block;width:100%;max-width:260px;max-height:170px;object-fit:cover;
      border-radius:9px;margin-bottom:8px;border:2px solid #101018;background:#000}
    .alert-balloon-actions{display:flex;align-items:center;justify-content:center;width:100%;margin-top:10px}
    .alert-audio-play{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 12px 7px 10px;
      border-radius:999px;border:2.5px solid #101018;background:#101018;color:#fff;
      font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;line-height:1;
      cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
      box-shadow:2px 2px 0 rgba(16,16,24,.45);transition:transform .1s,background .12s,color .12s}
    .alert-audio-play:active{transform:scale(.96)}
    .alert-audio-play svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;display:block}
    .alert-audio-play.playing{background:#fff;color:#101018}
    .alert-audio-play.playing .icon-play{display:none}
    .alert-audio-play.playing .icon-pause{display:block!important}
    .alert-audio-play:not(.playing) .icon-pause{display:none!important}
    .alert-audio-play[hidden]{display:none!important}
    .alert-audio-play-label{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;
      font-size:12px;font-weight:800;letter-spacing:.01em}
    .alert-audio-remain{opacity:.95}
    .alert-audio-sep{opacity:.45;font-weight:700}
    .alert-audio-total{opacity:.7}
    .alert-balloon-audio{display:none!important}
    .alert-balloon::before{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
      border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid #101018}
    .alert-balloon::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-3px);
      border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #fff}
    .alert-pin.expanded .alert-balloon{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
    @keyframes alertCore{
      0%,100%{transform:scale(1);filter:brightness(1)}
      50%{transform:scale(1.12);filter:brightness(1.2)}
    }
    @keyframes alertRadar{
      0%{opacity:.9;transform:translate(-50%,-50%) scale(.6)}
      70%{opacity:.15;transform:translate(-50%,-50%) scale(2.3)}
      100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}
    }
    @media(max-width:480px){
      .alert-balloon-text{font-size:16px}
      .alert-balloon{max-width:min(82vw,320px);padding:13px 15px}
      .alert-balloon-photo{max-height:200px}
    }

    /* Map items */
    .map-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
      cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:background .15s}
    .map-item:hover{background:var(--surface2);border-color:var(--border)}
    .map-item.active-map{border-color:var(--accent);background:rgba(200,200,200,.08)}
    .map-item-info{flex:1;overflow:hidden}
    .map-item-id{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .map-item-meta{font-size:10px;color:var(--text2);margin-top:2px}
    .map-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;
      background:rgba(200,200,200,.2);color:var(--accent);white-space:nowrap}
    .map-del{padding:5px;border:none;background:none;cursor:pointer;color:var(--text2);
      border-radius:5px;transition:color .15s,background .15s;flex-shrink:0}
    .map-del:hover{color:var(--danger);background:rgba(224,82,82,.12)}

    /* Modal — sheet compacto (atalho / alerta). Overlay transparente p/ conta-gotas.
       Fechado: #modal sem pointer-events (evita caixa invisível no meio da tela). */
    #modal-overlay{position:fixed;inset:0;background:transparent;backdrop-filter:none;
      z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:0;
      opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s}
    #modal-overlay.open{opacity:1;pointer-events:none;visibility:visible}
    #modal{
      position:relative;background:rgba(14,14,14,.97);border:1px solid var(--border);
      border-radius:16px 16px 0 0;width:100%;max-width:420px;
      box-shadow:0 -12px 48px rgba(0,0,0,.55);
      display:flex;flex-direction:column;
      max-height:min(78vh,640px);
      transform:translateY(28px);transition:transform .22s cubic-bezier(.2,.8,.2,1);
      pointer-events:none;overflow:hidden;
      margin:0 auto;
      padding-bottom:env(safe-area-inset-bottom,0px);
    }
    @media (min-width:720px){
      #modal-overlay{align-items:center;padding:16px}
      #modal{border-radius:14px;max-height:min(82vh,580px);box-shadow:var(--shadow)}
    }
    #modal-overlay.open #modal{transform:translateY(0);pointer-events:auto}
    .modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:12px 14px 8px;flex-shrink:0}
    #modal h2{font-size:15px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
    .modal-close-x{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
      background:var(--surface2);color:var(--text2);cursor:pointer;font-size:14px;line-height:1}
    .modal-body{padding:0 14px 8px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
    .form-group{margin-bottom:12px}
    .form-group label{display:block;font-size:11px;font-weight:600;color:var(--text2);
      margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
    .form-group input[type=text],
    .form-group input[type=password],
    .form-group input[type=number],
    .form-group input[type=color],
    .form-group input[type=search],
    .form-group textarea,
    .form-group select,
    #modal-name,
    #modal-group,
    #modal-subgroup,
    #modal-people-search,
    #notify-message,
    #push-custom-message,
    #push-brand-name,
    #brand-company-name,
    #push-custom-recipient,
    #notify-recipient{
      width:100%;padding:10px 12px;background:var(--surface2);
      border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;
      outline:none;transition:border-color .15s;font-family:inherit;
      box-sizing:border-box;-webkit-appearance:none;appearance:none}
    .form-group textarea,
    #modal-name,
    #notify-message,
    #push-custom-message{min-height:52px;resize:vertical;line-height:1.4}
    #modal-name{min-height:48px;font-size:16px}
    .form-group select,
    #modal-group,
    #modal-subgroup,
    #push-custom-recipient,
    #notify-recipient{
      cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
    .form-group input[type=text]:focus,
    .form-group input[type=password]:focus,
    .form-group input[type=number]:focus,
    .form-group input[type=search]:focus,
    .form-group textarea:focus,
    .form-group select:focus,
    #modal-name:focus,
    #modal-group:focus,
    #modal-subgroup:focus,
    #modal-people-search:focus,
    #notify-message:focus,
    #push-custom-message:focus,
    #push-brand-name:focus,
    #brand-company-name:focus,
    #push-custom-recipient:focus,
    #notify-recipient:focus{border-color:var(--accent)}

    .who-presets{display:flex;gap:6px}
    .who-chip{
      flex:1;padding:9px 6px;border-radius:10px;border:1px solid var(--border);
      background:var(--surface2);color:var(--text2);font-size:12px;font-weight:700;
      cursor:pointer;transition:all .12s;text-align:center
    }
    .who-chip:hover{border-color:var(--accent);color:var(--text)}
    .who-chip.active{background:var(--accent);border-color:transparent;color:var(--on-accent)}
    .who-summary{margin-top:8px;font-size:12px;color:var(--text2);line-height:1.35}
    .who-summary strong{color:var(--text);font-weight:600}
    .who-select-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    @media (max-width:380px){.who-select-row{grid-template-columns:1fr}}
    .who-chip-grid{display:flex;flex-wrap:wrap;gap:6px}
    .who-chip-grid .audience-chip{
      display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
      border:1px solid var(--border);background:var(--surface2);color:var(--text2);
      font-size:12px;font-weight:600;cursor:pointer;user-select:none
    }
    .who-chip-grid .audience-chip input{accent-color:var(--accent);margin:0}
    .who-chip-grid .audience-chip.on{background:rgba(200,200,200,.16);border-color:var(--accent);color:var(--text)}

    .modal-photo-row{display:flex;align-items:center;gap:10px}
    .modal-photo-row .sticker-preview{flex:1;min-height:48px;max-height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px}
    .modal-photo-row .sticker-preview img{max-height:56px!important}
    .modal-photo-row .btn{flex-shrink:0}
    .modal-audio-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .modal-audio-status{flex:1;min-width:120px;font-size:12px;color:var(--text2)}
    .modal-audio-status.recording{color:#f74f4f;font-weight:700}
    #alert-lightbox-audio{display:none!important}
    .alert-balloon-audio{display:none!important}

    .color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .color-grid{display:flex;gap:7px;flex-wrap:wrap;flex:1}
    .color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;
      border:2px solid transparent;transition:transform .1s,border-color .1s;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
    .color-swatch.selected{border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
    .color-custom-row{display:flex;align-items:center;gap:10px;margin-top:10px}
    .color-custom-label{font-size:12px;color:var(--text2);font-weight:600;margin:0}
    #marker-custom-color{width:36px;height:28px;padding:0;border:1px solid var(--border);
      border-radius:8px;background:var(--surface2);cursor:pointer;flex-shrink:0}

    .modal-actions{
      display:flex;gap:8px;padding:10px 14px 12px;flex-shrink:0;
      border-top:1px solid var(--border);background:rgba(14,14,14,.98);
    }
    .modal-actions .btn{flex:1;justify-content:center;min-height:42px}
    .zoom-preview{display:inline-flex;align-items:center;gap:6px;padding:4px 0 2px;
      font-size:11px;color:var(--text2);background:transparent;border-radius:0}
    .zoom-preview strong{color:var(--text)}
    .modal-color-hint{font-size:11px;opacity:.85}

    .modal-subsheet{
      position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
      background:rgba(14,14,14,.98);padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
    }
    .modal-subsheet[hidden]{display:none!important}
    .modal-subsheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
    .modal-subsheet-head strong{font-size:14px}
    #modal-people-search{margin-bottom:10px}
    .modal-people-list{
      flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
      padding:4px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;
      display:flex;flex-direction:column;gap:2px;
    }
    .modal-people-list .audience-item{
      display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;
      font-size:13px;color:var(--text);cursor:pointer
    }
    .modal-people-list .audience-item:hover{background:rgba(255,255,255,.04)}
    .modal-people-list .audience-item input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}

    #modal .audience-list{
      margin-top:0;padding:8px;background:var(--surface2);border:1px solid var(--border);
      border-radius:8px}
    #modal .sticker-preview{
      border:1px solid var(--border);border-style:solid;background:var(--surface2)}
    #modal .mini-note{margin-top:6px}

    @media (max-width:640px){
      #modal{max-height:min(70vh,100%)}
      #modal-overlay.mode-alert #zoom-preview{display:none!important}
    }

    /* Pin markers — bandeira de atalho */
    .marker-pin{position:absolute;cursor:pointer;pointer-events:auto;overflow:visible;
      -webkit-tap-highlight-color:transparent;z-index:10;
      transition:transform .12s;transform-origin:7px 100%;user-select:none;touch-action:manipulation}
    .marker-pin .pin-flag{display:block;width:48px;height:68px;overflow:visible}
    .marker-pin .pin-label{position:absolute;left:46px;top:6px;
      background:rgba(10,10,10,.92);border:1px solid var(--border);
      border-radius:7px;padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap;
      pointer-events:auto;opacity:0;transition:opacity .15s,background .12s;color:var(--text);cursor:pointer;
      box-shadow:0 4px 12px rgba(0,0,0,.35)}
    @media (hover:hover) and (pointer:fine){
      .marker-pin:hover{transform:scale(1.12)}
      .marker-pin .pin-label:hover{background:var(--accent);border-color:transparent;color:var(--on-accent)}
      .marker-pin:hover .pin-label{opacity:1}
    }
    body.labels-visible .pin-label{opacity:1!important}
    body.labels-visible .marker-pin{transform:scale(1.06)}
    @media (max-width:640px){
      .marker-pin .pin-flag{width:54px;height:76px}
      .marker-pin .pin-label{left:52px;top:8px;font-size:13px;padding:5px 11px}
    }

    /* Toast de ação — gaveta no canto inferior direito */
    #toast{position:fixed;right:16px;bottom:88px;left:auto;
      max-width:min(340px,calc(100vw - 32px));
      background:rgba(10,10,10,.94);backdrop-filter:blur(12px);
      border:1px solid var(--border);border-radius:14px;
      padding:12px 16px;font-size:13px;font-weight:500;line-height:1.35;color:var(--text);
      z-index:300;box-shadow:0 10px 32px rgba(0,0,0,.45);
      transform:translateY(22px);opacity:0;pointer-events:none;
      white-space:normal;word-break:break-word;
      transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1)}
    #toast.show{transform:translateY(0);opacity:1}

    /* Loading — mesmo canto; fica acima do toast de ação quando os dois coincidem */
    #loading{position:fixed;right:16px;bottom:88px;
      display:flex;flex-direction:row;align-items:center;gap:12px;
      background:rgba(10,10,10,.94);backdrop-filter:blur(12px);
      border:1px solid var(--border);border-radius:14px;
      padding:12px 16px;z-index:290;max-width:min(340px,calc(100vw - 32px));
      box-shadow:0 10px 32px rgba(0,0,0,.45);
      opacity:0;transform:translateY(18px);pointer-events:none;
      transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1)}
    #loading:not(.hidden):not(.empty-state){opacity:1;transform:translateY(0)}
    #loading.hidden{opacity:0!important;transform:translateY(18px)!important;pointer-events:none!important}
    body:has(#toast.show) #loading:not(.hidden):not(.empty-state){bottom:calc(88px + 64px)}
    #loading.empty-state{inset:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
      background:var(--bg);backdrop-filter:none;border:none;border-radius:0;
      box-shadow:none;max-width:none;padding:24px;
      display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;
      text-align:center;opacity:1;transform:none;pointer-events:all;z-index:50}
    #loading.empty-state.hidden{opacity:0!important;pointer-events:none!important}
    #loading .spinner{width:22px;height:22px;flex-shrink:0;border:2px solid var(--border);
      border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
    #loading.empty-state .spinner{width:48px;height:48px;border-width:3px}
    @keyframes spin{to{transform:rotate(360deg)}}
    #loading p{color:var(--text);font-size:13px;font-weight:500;margin:0;line-height:1.35}
    #loading.empty-state p{font-size:14px;font-weight:inherit;color:var(--text2)}

    /* OSD — sem barra de controles nativa (só nosso FAB / layers) */
    #osd-container .openseadragon-container{background:#0d0d0d !important}
    #osd-container button.openseadragon-button,
    #osd-container .openseadragon-toolbar{display:none!important;pointer-events:none!important}
    .navigator{border:1px solid rgba(200,200,200,.35) !important;border-radius:8px !important;
      overflow:hidden !important;box-shadow:0 4px 20px rgba(0,0,0,.6) !important;
      opacity:.82 !important;transition:opacity .2s !important;margin:8px 80px 80px 8px !important}
    .navigator:hover{opacity:1 !important}
    .displayregion{border:2px solid #c8c8c8 !important;border-radius:3px !important}

    /* Zoom badge — canto superior direito; monitor fica logo abaixo */
    #zoom-badge{position:fixed;top:12px;right:12px;background:rgba(10,10,10,.88);
      backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:8px;
      padding:5px 12px;font-size:12px;font-weight:600;color:#e8e8e8;
      z-index:126;pointer-events:none;letter-spacing:.05em}

    /* Add-mode hint */
    #add-mode-hint{position:fixed;top:16px;left:50%;transform:translateX(-50%);
      background:var(--accent);color:var(--on-accent);border-radius:20px;padding:8px 16px;
      font-size:13px;font-weight:600;z-index:101;pointer-events:none;display:none;
      box-shadow:0 4px 16px rgba(200,200,200,.4)}
    body.add-mode #osd-container,
    body.add-mode #osd-container .openseadragon-canvas,
    body.add-mode #osd-container canvas{cursor:var(--tool-cursor)!important}
    body.add-mode #add-mode-hint{display:block}

    /* Confirm dialog */
    #confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
      z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;
      opacity:0;pointer-events:none;transition:opacity .15s}
    #confirm-overlay.open{opacity:1;pointer-events:all}
    #confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
      padding:24px;width:100%;max-width:340px;box-shadow:var(--shadow)}
    #confirm-box h3{font-size:15px;font-weight:600;margin-bottom:8px}
    #confirm-box p{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.5}
    #confirm-box .actions{display:flex;gap:10px}
    #confirm-box .actions .btn{flex:1;justify-content:center}

    /* Alert lightbox — big, legible view of the photo + message on tap */
    #alert-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(6px);
      z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;
      opacity:0;pointer-events:none;transition:opacity .18s}
    #alert-lightbox-overlay.open{opacity:1;pointer-events:all}
    #alert-lightbox{position:relative;background:#fff;color:#101018;border:3px solid #101018;
      border-radius:16px;width:min(92vw,560px);min-width:min(92vw,280px);max-width:min(92vw,560px);
      max-height:88vh;overflow-y:auto;box-sizing:border-box;
      box-shadow:5px 5px 0 rgba(0,0,0,.6);display:flex;flex-direction:column}
    /* Photo alerts get a bigger frame so a high-res photo has room to use the
       80% cap below instead of being squeezed into the plain-text card width. */
    #alert-lightbox.has-photo{width:min(90vw,720px);max-width:90vw;max-height:92vh}
    /* Natural size if it fits; otherwise capped at 80% of the viewport (never
       upscaled, never overflowing) — width/height:auto + align-self:center
       stop flex from stretching small photos up to the card's width. */
    #alert-lightbox-photo{display:block;align-self:center;width:auto;height:auto;
      max-width:80vw;max-height:80vh;object-fit:contain;
      background:#000;border-radius:13px 13px 0 0}
    #alert-lightbox-photo[hidden]{display:none}
    #alert-lightbox-body{display:flex;flex-direction:column;align-items:center;gap:12px;
      padding:20px 52px 20px 22px;width:100%;box-sizing:border-box}
    #alert-lightbox-text{padding:0;font-size:19px;font-weight:700;line-height:1.5;
      white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;hyphens:manual;
      width:100%;max-width:100%;text-align:left}
    #alert-lightbox-play{margin:0 auto;align-self:center}
    #alert-lightbox-play[hidden]{display:none!important}
    #btn-close-alert-lightbox{position:absolute;top:10px;right:10px;width:36px;height:36px;
      border-radius:50%;background:#101018;color:#fff;border:none;cursor:pointer;
      display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.5);z-index:2;
      flex-shrink:0}
    @media(max-width:480px){
      #alert-lightbox{width:min(94vw,560px);min-width:min(94vw,260px)}
      #alert-lightbox-body{padding:18px 48px 16px 16px;gap:10px}
      #alert-lightbox-text{font-size:17px;line-height:1.45}
      #btn-close-alert-lightbox{top:8px;right:8px;width:34px;height:34px}
    }

    /* Empty state */
    .empty-state{text-align:center;padding:32px 16px;color:var(--text2);font-size:13px;line-height:1.6}
    .empty-state svg{opacity:.35;margin-bottom:12px}

    /* Scrollbars */
    /* Scrollbars — regras base já definidas acima no tema */
    .panel-body{scrollbar-gutter:stable}

    @media(max-width:480px){
    .side-panel{width:calc(100vw - 16px);max-height:76vh;border-radius:16px}
      #users-panel{width:calc(100vw - 16px);max-height:86vh}
      #fab-left{gap:8px;bottom:max(8px, env(safe-area-inset-bottom, 0px));
        max-width:calc(100vw - 88px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))}
      .fab{width:44px;height:44px}
      #btn-settings{width:44px;height:44px;
        right:max(8px, env(safe-area-inset-right, 0px));
        bottom:max(8px, env(safe-area-inset-bottom, 0px))}
      #conv-dock{right:calc(60px + env(safe-area-inset-right, 0px));
        bottom:max(8px, env(safe-area-inset-bottom, 0px));
        min-width:168px;max-width:calc(100vw - 84px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));padding:8px 10px}
      #side-tools{left:max(8px, env(safe-area-inset-left, 0px));
        bottom:max(8px, env(safe-area-inset-bottom, 0px))}
      #draw-toolbox{left:max(8px, env(safe-area-inset-left, 0px));top:auto;
        bottom:calc(112px + env(safe-area-inset-bottom, 0px));transform:none}
      #draw-toolpanel{left:calc(90px + env(safe-area-inset-left, 0px));top:auto;
        bottom:calc(92px + env(safe-area-inset-bottom, 0px));transform:none;
        width:calc(100vw - 98px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        max-height:56vh;padding:10px 12px}
      #settings-menu{right:max(8px, env(safe-area-inset-right, 0px));
        bottom:calc(62px + env(safe-area-inset-bottom, 0px));
        min-width:min(210px,calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        max-height:calc(100dvh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y:auto}
      #doc-view{padding:6px 0 104px}
      .doc-page-card.single{padding:0 6px}
    }

    /* Landscape mobile: botões sempre na área visível (tela cheia / settings acessíveis) */
    @media (orientation: landscape) and (max-height: 520px){
      #fab-left{
        bottom:max(4px, env(safe-area-inset-bottom, 0px));
        gap:6px;
        max-width:calc(100vw - 100px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
      }
      .fab,#btn-settings{width:40px;height:40px;border-radius:12px}
      .fab svg,#btn-settings svg{width:18px;height:18px}
      #btn-settings{
        right:max(6px, env(safe-area-inset-right, 0px));
        bottom:max(6px, env(safe-area-inset-bottom, 0px));
      }
      #side-tools{
        left:max(6px, env(safe-area-inset-left, 0px));
        bottom:max(6px, env(safe-area-inset-bottom, 0px));
      }
      #conv-dock{
        right:calc(54px + env(safe-area-inset-right, 0px));
        bottom:max(6px, env(safe-area-inset-bottom, 0px));
        min-width:140px;max-width:min(220px, calc(100vw - 120px));
        padding:6px 8px;
      }
      #settings-menu{
        right:max(6px, env(safe-area-inset-right, 0px));
        bottom:calc(52px + env(safe-area-inset-bottom, 0px));
        max-height:calc(100dvh - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        overflow-y:auto;
      }
      #zoom-badge{
        top:max(6px, env(safe-area-inset-top, 0px));
        right:max(6px, env(safe-area-inset-right, 0px));
      }
      .user-chip,#current-user-chip{
        top:max(6px, env(safe-area-inset-top, 0px));
        left:max(6px, env(safe-area-inset-left, 0px));
      }
      #draw-toolbox{
        left:max(6px, env(safe-area-inset-left, 0px));
        top:auto;bottom:auto;
        /* canto superior esquerdo abaixo do chip — evita sair da tela baixa */
        top:max(52px, calc(env(safe-area-inset-top, 0px) + 44px));
        transform:none;max-height:calc(100dvh - 100px);overflow-y:auto;
      }
      #draw-toolpanel{
        left:calc(72px + env(safe-area-inset-left, 0px));
        top:max(52px, calc(env(safe-area-inset-top, 0px) + 44px));
        bottom:auto;transform:none;
        width:min(340px, calc(100vw - 90px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
        max-height:calc(100dvh - 70px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      }
      #toast,#loading:not(.empty-state){
        bottom:calc(56px + env(safe-area-inset-bottom, 0px));
        right:max(8px, env(safe-area-inset-right, 0px));
      }
    }

    /* Convert modal */
    #convert-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);
      z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;
      opacity:0;pointer-events:none;transition:opacity .2s}
    #convert-overlay.open{opacity:1;pointer-events:all}
    #convert-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
      padding:26px;width:100%;max-width:460px;box-shadow:var(--shadow);
      transform:translateY(20px);transition:transform .2s}
    #convert-overlay.open #convert-box{transform:translateY(0)}
    #convert-box h2{font-size:16px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}
    .drop-zone{display:block;border:2px dashed var(--border);border-radius:10px;padding:28px 16px;
      text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
      color:var(--text2);font-size:13px;user-select:none}
    .drop-zone:hover,.drop-zone.drag{border-color:var(--accent);background:rgba(200,200,200,.06)}
    .drop-zone svg{margin-bottom:10px;opacity:.5;display:block;margin-left:auto;margin-right:auto}
    .drop-zone .dz-name{font-weight:600;color:var(--accent);margin-top:6px;font-size:13px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}
    .dpi-row{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}
    .dpi-btn{flex:1;min-width:70px;padding:8px 4px;border-radius:8px;border:1px solid var(--border);
      background:var(--surface2);color:var(--text2);font-size:12px;font-weight:600;
      cursor:pointer;transition:all .15s;text-align:center;line-height:1.3}
    .dpi-btn:hover{border-color:var(--accent);color:var(--accent)}
    .dpi-btn.sel{background:var(--accent);border-color:transparent;color:var(--on-accent)}
    #conv-page-wrap{margin-top:14px}
    #conv-page-wrap.hidden{display:none}
    #conv-page-row .dpi-btn{flex:0 0 auto;min-width:56px;padding:10px 12px}
    .conv-page-actions{display:flex;gap:8px;margin-top:8px}
    .conv-page-preview-wrap{margin-top:10px;border:1px solid var(--border);border-radius:10px;
      background:var(--surface2);overflow:hidden;display:flex;align-items:center;justify-content:center;
      min-height:120px;max-height:220px}
    #conv-page-preview{display:block;max-width:100%;max-height:220px;width:auto;height:auto}
    #map-page-bar{
      position:fixed;
      top:max(12px, env(safe-area-inset-top, 0px));
      left:50%;transform:translateX(-50%);
      z-index:125;
      display:flex;align-items:center;gap:4px;
      padding:4px 6px;border-radius:999px;
      background:rgba(10,10,10,.92);border:1px solid var(--border);backdrop-filter:blur(10px);
      box-shadow:0 6px 20px rgba(0,0,0,.4);
      max-width:min(200px, calc(100vw - 168px));
    }
    #map-page-bar.hidden{display:none!important}
    #map-page-bar button{
      width:30px;height:30px;border-radius:50%;border:none;background:transparent;
      color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
      flex-shrink:0;padding:0;
    }
    #map-page-bar button:hover{background:rgba(255,255,255,.08)}
    #map-page-bar button:disabled{opacity:.3;cursor:default}
    #map-page-bar button:disabled:hover{background:transparent}
    #map-page-select{
      appearance:none;-webkit-appearance:none;
      background:transparent;color:var(--text);border:none;
      border-radius:8px;padding:4px 4px;font-size:12px;font-weight:800;
      cursor:pointer;text-align:center;min-width:3.2em;max-width:5.5em;
      letter-spacing:.02em;
    }
    #map-page-select:focus{outline:none;background:rgba(255,255,255,.06)}
    /* Retrato / telas estreitas: abaixo do chip de usuário (e do zoom) */
    @media (max-width:640px), (orientation:portrait){
      #map-page-bar{
        top:max(52px, calc(env(safe-area-inset-top, 0px) + 46px));
        max-width:min(168px, calc(100vw - 24px));
      }
    }
    @media (max-width:480px) and (orientation:portrait){
      #map-page-bar{
        top:max(50px, calc(env(safe-area-inset-top, 0px) + 44px));
        padding:3px 5px;gap:2px;
      }
      #map-page-bar button{width:28px;height:28px}
      #map-page-select{font-size:11px;padding:3px 2px}
    }
    #conv-progress-wrap{display:none;margin-top:16px}
    #conv-progress-wrap.show{display:block}
    .conv-bar-bg{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;margin:10px 0 6px}
    .conv-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
      border-radius:4px;transition:width .25s linear;width:0%}
    .conv-stats{display:flex;gap:16px;font-size:11px;color:var(--text2);flex-wrap:wrap;margin-top:4px}
    .conv-stats span strong{color:var(--text)}
    #conv-log{font-size:11px;color:var(--text2);margin-top:8px;min-height:18px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .conv-phase{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}