/* SkilloPrint final auth/workspace presentation overrides. Order mirrors former inline styles. */

/* ===== workspace-layout-theme-fix ===== */
#mainApp:is([style*="display: block"],[style*="display: grid"]):not(.workspace-tool-focused):not(.public-free-mode){
    width:min(1480px,calc(100% - 28px))!important;
    max-width:1480px!important;margin:0 auto!important;padding:12px 0 24px!important;box-sizing:border-box!important;
  }
  #mainApp[hidden],#mainApp [hidden]{display:none!important}
  #mainApp .workspace-header-row{min-width:0!important;flex-wrap:wrap!important}
  #mainApp .workspace-header-row>*{min-width:0}
  #mainApp .workspace-tool-grid .tab-nav.dashboard-tool-launcher{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr))!important;
    gap:10px!important;width:100%!important;min-width:0!important
  }
  #mainApp .workspace-tool-grid .dashboard-tool-launcher .dashboard-card{min-width:0!important;white-space:normal!important}
  @media(max-width:900px){
    #mainApp:is([style*="display: block"],[style*="display: grid"]):not(.workspace-tool-focused):not(.public-free-mode){
      width:calc(100% - 20px)!important;gap:12px!important;padding-top:10px!important
    }
    #mainApp .workspace-header-row{gap:8px!important;padding:10px!important}
    #mainApp .workspace-header-row>strong{flex:1 1 100%!important}
  }

  /* Single Admin Message component: no old flex/inline/banner overrides. */
  #mainApp #globalNoticeBanner{
    width:100%!important;min-width:0!important;max-width:none!important;
    box-sizing:border-box!important;position:relative!important;
    display:block!important;margin:0!important;padding:0!important;
    background:#71373a!important;color:#fff!important;border:1px solid #854647!important;
    border-radius:8px!important;overflow:hidden!important;
    box-shadow:0 3px 12px rgba(20,25,40,.14)!important;
    text-align:center!important;
  }
  #mainApp #globalNoticeBanner[hidden],#mainApp.public-free-mode #globalNoticeBanner{
    display:none!important;
  }
  #mainApp #globalNoticeBanner .global-notice-heading{
    margin:0!important;padding:6px 12px 3px!important;color:#fff!important;
    font:700 14px/1.3 Arial,sans-serif!important;text-align:center!important;
  }
  #mainApp #globalNoticeBanner .global-notice-line{
    display:flex;align-items:center;width:100%;min-width:0;overflow:hidden;
    padding:4px 0 7px;
  }
  #mainApp #globalNoticeBanner .global-notice-viewport{
    flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;
  }
  #mainApp #globalNoticeBanner #globalNoticeText{
    display:inline-block;width:max-content;max-width:none;
    box-sizing:content-box;margin:0!important;padding:0 0 0 100%!important;
    white-space:nowrap!important;overflow-wrap:normal!important;
    color:#fff!important;text-align:left!important;
    font:600 14px/1.45 Arial,sans-serif!important;
    animation:skillo-global-notice-travel var(--global-notice-speed,28s) linear infinite;
    will-change:transform;
  }
  @keyframes skillo-global-notice-travel{
    from{transform:translateX(0)}
    to{transform:translateX(-100%)}
  }
  #mainApp #globalNoticeBanner .global-notice-attachment{
    flex:0 0 auto;max-width:70px;padding:0 8px;
  }
  #mainApp #globalNoticeBanner .global-notice-attachment[hidden]{display:none!important}
  #mainApp #globalNoticeBanner .global-notice-attachment img{
    display:block;max-width:64px;max-height:44px;object-fit:contain;border-radius:4px;
  }
  #mainApp #globalNoticeBanner:hover #globalNoticeText,
  #mainApp #globalNoticeBanner:focus-within #globalNoticeText{animation-play-state:paused}
  @media(prefers-reduced-motion:reduce){
    #mainApp #globalNoticeBanner .global-notice-viewport{overflow-x:auto}
    #mainApp #globalNoticeBanner #globalNoticeText{
      animation:none!important;will-change:auto;padding-left:8px!important;
    }
  }
  @media(max-width:620px){
    #mainApp #globalNoticeBanner .global-notice-heading{font-size:13px!important}
    #mainApp #globalNoticeBanner #globalNoticeText{font-size:13px!important}
  }

  html.op-theme-dark,html.op-theme-dark body{background:#0b1220!important;color:#e5e7eb!important;color-scheme:dark}
  html.op-theme-dark body #mainApp{background:#0b1220!important;color:#e5e7eb!important;border-color:#273449!important}
  html.op-theme-dark #mainApp .container,html.op-theme-dark #mainApp .tab-content,html.op-theme-dark #mainApp .control-panel,
  html.op-theme-dark #mainApp .upload-box,html.op-theme-dark #mainApp .pp-enhancer-shell,html.op-theme-dark #mainApp .pp-five-a4,
  html.op-theme-dark #mainApp .pp-enhancer-preview,html.op-theme-dark #mainApp .workspace-tool-grid,
  html.op-theme-dark #mainApp .portal-tool-sidebar{
    background:#111b2b!important;color:#e5e7eb!important;border-color:#34445a!important;box-shadow:0 10px 26px #0006!important
  }html.op-theme-dark #mainApp .workspace-tool-grid .dashboard-card,
  html.op-theme-dark #mainApp .pp-five-slot{background:#172337!important;color:#f1f5f9!important;border-color:#3c506a!important}
  html.op-theme-dark #mainApp :is(h1,h2,h3,h4,p,label,span,strong,small,li,td,th,legend){color:#e5e7eb!important}
  html.op-theme-dark #mainApp a{color:#93c5fd!important}
  html.op-theme-dark #mainApp :is(input,select,textarea,[contenteditable="true"]){color:#f8fafc!important;background:#0b1321!important;border-color:#475569!important;caret-color:#fff!important}
  html.op-theme-dark #mainApp :is(button,.action-btn,.tab-btn){color:#f8fafc!important}
  
  html.op-theme-dark #mainApp dialog{background:#111b2b!important;color:#e5e7eb!important;border-color:#475569!important}
  .pp-five-a4{margin-top:18px!important;text-align:left!important}
  .pp-five-a4>h2{margin:0 0 6px!important;font-size:clamp(18px,2vw,24px)!important}
  .pp-five-a4>p{line-height:1.5!important}
  .pp-five-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
  .pp-five-slot{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border:1px solid var(--border-color,#cbd5e1);border-radius:12px;background:var(--panel,#fff)}
  .pp-five-paste{display:grid;place-items:center;min-height:100px;padding:8px;border:2px dashed #7c93ad;border-radius:10px;text-align:center;overflow:hidden;cursor:text;font-size:12px;line-height:1.4}
  .pp-five-paste:focus{outline:3px solid #60a5fa66;border-color:#3b82f6}
  .pp-five-paste[aria-invalid="true"]{border-color:#ef4444}
  .pp-five-actions{display:flex;flex-wrap:wrap;gap:7px}
  .pp-five-actions button{flex:1 1 auto;min-width:0}
  .pp-five-preview{display:block;width:100%;height:96px;object-fit:contain;background:#fff;border:1px solid #cbd5e1;border-radius:8px}
  .pp-five-name{overflow-wrap:anywhere}
  #ppFiveA4Status{min-height:20px;margin:8px 0;color:var(--accent-blue);font-size:13px}
  #ppFiveA4PreviewFrame{width:min(100%,680px);margin:12px auto 0}#ppFiveA4PreviewFrame[hidden]{display:none!important}#ppFiveA4Canvas{display:block;width:100%;height:auto;object-fit:contain;margin:0 auto;border:1px solid #cbd5e1;border-radius:8px;background:white;box-shadow:0 8px 24px #0002}
  @media(max-width:1100px){.pp-five-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:700px){.pp-five-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:420px){.pp-five-slots{grid-template-columns:1fr}}

  /* Desktop landscape operation layout — shared presentation only. Existing
     IDs, handlers, canvases, downloads and server/payment logic stay intact. */
  @media (min-width:1180px){
    #mainApp.workspace-tool-focused{
      width:min(1760px,calc(100% - 20px))!important;max-width:1760px!important;padding-bottom:12px!important;
    }
    #mainApp.workspace-tool-focused>.container{width:100%!important;max-width:none!important;min-width:0!important}
    #mainApp.workspace-tool-focused .workspace-header-row{
      min-height:58px!important;padding:8px 12px!important;margin-bottom:8px!important;border-radius:13px!important;
    }
    #mainApp.workspace-tool-focused .workspace-header-row>strong{font-size:18px!important}
    #mainApp.workspace-tool-focused .tab-content.active:not(#tab-tools-home):not(#tab-history):not(#tab-my-account){
      display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;
      gap:10px 12px!important;align-items:start;align-content:start;width:100%!important;min-width:0!important;min-height:0!important;
      max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
      padding:14px!important;border-radius:14px!important;animation:none!important;
    }
    #mainApp.workspace-tool-focused .tab-content.active:not(#tab-tools-home):not(#tab-history):not(#tab-my-account)>*{min-width:0;box-sizing:border-box;grid-column:1/-1}
    #mainApp.workspace-tool-focused .tab-content.active:not(#tab-tools-home):not(#tab-history):not(#tab-my-account)>.badge{
      grid-column:1/4;grid-row:1;margin:0!important;align-self:center;justify-self:start;max-width:100%;white-space:normal;line-height:1.25;
    }
    #mainApp.workspace-tool-focused .tab-content.active:not(#tab-tools-home):not(#tab-history):not(#tab-my-account)>h1{
      grid-column:4/9;grid-row:1;margin:0!important;align-self:center;text-align:center;font-size:clamp(18px,1.55vw,24px)!important;line-height:1.15!important;
    }
    #mainApp.workspace-tool-focused .tab-content.active:not(#tab-tools-home):not(#tab-history):not(#tab-my-account)>h1+p{
      grid-column:9/-1;grid-row:1;margin:0!important;align-self:center;text-align:right;font-size:10.5px!important;line-height:1.35!important;max-height:44px;overflow:hidden;
    }
    #mainApp.workspace-tool-focused .tab-content.active::before{display:none!important}
    #mainApp.workspace-tool-focused .tab-content.active :is(.control-panel,.upload-section,.preview-container,.btn-group){max-width:none!important;margin:0!important}
    #mainApp.workspace-tool-focused .tab-content.active>.control-panel,
    #mainApp.workspace-tool-focused .tab-content.active>.upload-section,
    #mainApp.workspace-tool-focused .tab-content.active>.preview-container,
    #mainApp.workspace-tool-focused .tab-content.active>.btn-group,
    #mainApp.workspace-tool-focused .tab-content.active>section{border-radius:11px!important}
    #mainApp.workspace-tool-focused .tab-content.active .control-panel{padding:10px 12px!important}
    #mainApp.workspace-tool-focused .tab-content.active .upload-section{gap:8px!important;padding:0!important}
    #mainApp.workspace-tool-focused .tab-content.active .upload-box{padding:11px!important;min-width:0!important}
    #mainApp.workspace-tool-focused .tab-content.active .preview-container{gap:8px!important;align-items:stretch!important}
    #mainApp.workspace-tool-focused .tab-content.active .preview-box{flex:1 1 0;min-width:0!important;padding:8px!important}
    #mainApp.workspace-tool-focused .tab-content.active .btn-group{gap:7px!important;align-items:center!important}
    #mainApp.workspace-tool-focused .tab-content.active :is(.action-btn,.login-btn){min-height:36px!important;padding:8px 13px!important;font-size:11px!important;border-radius:8px!important}
    #mainApp.workspace-tool-focused .tab-content.active :is(.action-btn,.login-btn):hover:not(:disabled){transform:none!important}
    #mainApp.workspace-tool-focused .tab-content.active canvas{max-height:58dvh}

    /* Card Generator: controls / front-back preview / A4 composition. */
    #tab-cards>#slotCounter{grid-column:1/-1;grid-row:2;margin:0!important;justify-self:center}
    #tab-cards>.control-panel,#tab-cards>.upload-section,#tab-cards>#pvcPasswordBox{grid-column:1/5!important}
    #tab-cards>#basicCardPreview,#tab-cards>#basicPvcSideDownloads,#tab-cards>#premiumPvcSideDownloads,#tab-cards>#premiumCardEditorOpen,#tab-cards>#premiumCardEditor,#tab-cards>.btn-group{grid-column:5/9!important}
    #tab-cards>div:last-child{grid-column:9/-1!important;grid-row:3/span 12!important}
    #tab-cards>#basicCardPreview{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
    #tab-cards>#basicCardPreview canvas{max-height:230px!important}
    /* Keep the premium PDF picker and its status stacked. The generic
       upload-section flex row otherwise lets a long success/error message
       squeeze the picker into a narrow vertical strip after a PDF is chosen. */
    #tab-cards>.upload-section.premium-only{
      display:grid!important;grid-template-columns:minmax(0,1fr)!important;
      gap:8px!important;align-content:start!important;justify-items:stretch!important;
    }
    #tab-cards>.upload-section.premium-only>.upload-box{
      width:100%!important;max-width:none!important;min-width:0!important;
      flex:none!important;box-sizing:border-box!important;
    }
    #tab-cards>.upload-section.premium-only>#pvcPdfStatus{
      width:100%!important;min-width:0!important;margin:0!important;
      white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
    }

    /* Shared final-output column for sheet-producing tools. */
    #tab-cards>div:last-child,#tab-bulk-auto-id>div:last-child,#tab-passport>div:last-child,#tab-name-passport>div:last-child,#tab-4x6>div:last-child{
      position:sticky;top:0;align-self:start;max-height:calc(100dvh - 126px);overflow:auto;margin:0!important;padding:11px!important;
      border:1px solid #cddde5!important;border-radius:11px!important;background:linear-gradient(145deg,#f8fbfd,#fff 72%,#fff8f2)!important;
      box-shadow:0 7px 16px rgba(35,55,79,.07)!important;
    }
    html.op-theme-dark #mainApp :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6)>div:last-child{background:#111b2b!important;border-color:#34445a!important}
    #tab-cards>div:last-child canvas,#tab-bulk-auto-id>div:last-child canvas,#tab-passport>div:last-child canvas,#tab-name-passport>div:last-child canvas,#tab-4x6>div:last-child canvas{max-height:52dvh!important}

    /* Bulk Auto ID */
    #tab-bulk-auto-id>.control-panel:not(#bulkAutoReviewPanel),#tab-bulk-auto-id>#bulkAutoPasswordBox{grid-column:1/5!important}
    #tab-bulk-auto-id>#bulkAutoStatus,#tab-bulk-auto-id>#bulkAutoReviewPanel{grid-column:5/9!important}
    #tab-bulk-auto-id>#bulkAutoReviewPanel{max-height:62dvh;overflow:auto}
    #tab-bulk-auto-id>div:last-child{grid-column:9/-1!important;grid-row:2/span 10!important}

    /* Passport */
    #tab-passport>#passportUploadBlocksContainer,#tab-passport>.control-panel:nth-child(4){grid-column:1/5!important}
    #tab-passport>#passportUploadBlocksContainer{max-height:59dvh;overflow:auto;align-content:flex-start!important}
    #tab-passport>.control-panel:not(:nth-child(4)),#tab-passport>.btn-group{grid-column:5/9!important}
    #tab-passport>div:last-child{grid-column:9/-1!important;grid-row:2/span 12!important}

    /* Name + Date Passport */
    #tab-name-passport>.upload-section,#tab-name-passport>.control-panel:nth-child(5){grid-column:1/5!important}
    #tab-name-passport>.control-panel:not(:nth-child(5)),#tab-name-passport>.preview-container,#tab-name-passport>.btn-group{grid-column:5/9!important}
    #tab-name-passport>div:last-child{grid-column:9/-1!important;grid-row:2/span 10!important}
    #tab-name-passport>.preview-container canvas{max-height:260px!important}

    /* 4×6 Photo */
    #tab-4x6>.upload-section,#tab-4x6>.control-panel{grid-column:1/5!important}
    #tab-4x6>.preview-container,#tab-4x6>.btn-group{grid-column:5/9!important}
    #tab-4x6>div:last-child{grid-column:9/-1!important;grid-row:2/span 8!important}
    #tab-4x6>.preview-container canvas{max-height:300px!important}

    /* Passport enhancer + five-photo A4 */
    #tab-premium-passport-enhancer>h1{grid-column:4/-1!important}
    #tab-premium-passport-enhancer>.pp-enhancer-shell,#tab-premium-passport-enhancer>label,#tab-premium-passport-enhancer>.control-panel:not(#ppFiveA4Panel){grid-column:1/5!important}
    #tab-premium-passport-enhancer>#ppEnhancerCompare,#tab-premium-passport-enhancer>#ppGeminiPasteArea,#tab-premium-passport-enhancer>#ppEnhancerFrameControls,#tab-premium-passport-enhancer>.pp-enhancer-controls,#tab-premium-passport-enhancer>#ppEnhancerStatus{grid-column:5/9!important}
    #tab-premium-passport-enhancer>#ppFiveA4Panel{grid-column:9/-1!important;grid-row:2/span 12!important;max-height:calc(100dvh - 126px);overflow:auto;margin:0!important}
    #tab-premium-passport-enhancer>#ppEnhancerCompare{margin:0!important}

    /* Resume: source data left, document preview right. */
    #tab-resume>.control-panel,#tab-resume>#resumeTemplatePicker,#tab-resume>.btn-group,#tab-resume>#resumeStatus{grid-column:1/6!important}
    #tab-resume>#resumePreviewPanel{grid-column:6/-1!important;grid-row:2/span 14!important;position:sticky;top:0;max-height:calc(100dvh - 126px);overflow:auto;margin:0!important}
    #tab-resume>#resumeBasicFields,#tab-resume>#resumeScanFields{max-height:49dvh;overflow:auto}
    #tab-resume>#resumeTemplatePicker{max-height:170px;overflow:auto}

    /* Resizer and conversion utilities. */
    #tab-resizer>.upload-section,#tab-pdf-to-jpg>.upload-section,#tab-pdf-compressor>.upload-section{grid-column:1/5!important}
    #tab-resizer>#resizerControlsPanel,#tab-pdf-to-jpg>#pdfToJpgControls,#tab-pdf-compressor>#compressorControlsArea{grid-column:5/-1!important;margin:0!important}
    #resizerControlsPanel{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:10px!important;align-items:start}
    #resizerControlsPanel>.control-panel{grid-column:1!important}
    #resizerControlsPanel>.preview-container{grid-column:2!important;grid-row:1/span 2!important}
    #resizerControlsPanel>.btn-group{grid-column:1!important}
    #resizerControlsPanel>.preview-container canvas{max-height:48dvh!important}
    #pdfToJpgControls,#compressorControlsArea{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
    #pdfToJpgControls>.control-panel,#compressorControlsArea>.control-panel{grid-column:1/-1!important}
    #pdfToJpgControls>.btn-group,#compressorControlsArea>.btn-group{grid-column:2!important;grid-row:2!important}

    /* Arranger / merger */
    #tab-arranger>.upload-section,#tab-jpg-to-pdf>.upload-section{grid-column:1/5!important}
    #tab-arranger>#arrangerContainerArea,#tab-jpg-to-pdf>#universalGalleryContainer{grid-column:5/-1!important;margin:0!important}
    #arrangerGridList,#universalGalleryList{max-height:56dvh;overflow:auto;align-content:flex-start}

    /* Heavy PDF editors already own a desktop grid; only remove outer portrait spacing. */
    #tab-pdf-unlock>*,#tab-office-conversion>*,#tab-pdf-editor>*,#tab-pdf-editor-pro>*{grid-column:1/-1!important}
    #tab-pdf-editor>#np-editor,#tab-pdf-editor-pro>#pro-pdf-editor{margin:0!important;max-width:none!important}
    #tab-pdf-editor #np-scroll{height:calc(100dvh - 224px)!important;min-height:320px!important}

    /* Static operator UI: no moving/floating controls. */
    #mainApp.workspace-tool-focused .tab-content.active :is(.action-btn,.login-btn,.quick-qty-btn,.upload-box,.preview-box){transition:none!important}
  }
  @media (min-width:900px) and (max-width:1179px){
    #mainApp.workspace-tool-focused{width:calc(100% - 16px)!important;max-width:none!important}
    
    #mainApp.workspace-tool-focused .control-panel{max-width:100%!important}
  }

  /* Operator UI refresh: remove nested desktop scroll traps and use the page as
     the primary scroll surface. Dedicated document previews keep their own pan/zoom. */
  :root{--operator-navy:#17345f;--operator-teal:#0f8c95;--operator-violet:#6d5bd0;--operator-coral:#e8784f;--operator-paper:#f6f8fb}
  @media (min-width:1180px){
    
    #mainApp.workspace-tool-focused :is(#bulkAutoReviewPanel,#resumeBasicFields,#resumeScanFields,#resumeTemplatePicker,#resumePreviewPanel,#passportUploadBlocksContainer,#arrangerGridList,#universalGalleryList){
      max-height:none!important;overflow:visible!important;
    }
    #mainApp.workspace-tool-focused #resumePreviewPanel,
    #mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6)>div:last-child{
      position:static!important;max-height:none!important;overflow:visible!important;
    }
  }
  #mainApp.workspace-tool-focused .tab-content.active{background:linear-gradient(145deg,#f7fafc 0%,#ffffff 62%,#fff8f3 100%)!important;border:1px solid #d7e0ea!important;box-shadow:0 10px 28px rgba(23,52,95,.08)!important}
  #mainApp.workspace-tool-focused .control-panel{background:#fff!important;border:1px solid #d7e0ea!important;box-shadow:0 5px 16px rgba(23,52,95,.06)!important}
  #mainApp.workspace-tool-focused .action-btn.btn-add,#mainApp.workspace-tool-focused .login-btn{background:linear-gradient(135deg,var(--operator-teal),var(--operator-violet))!important;border-color:#b8d8df!important;color:#fff!important}
  #mainApp.workspace-tool-focused .action-btn.btn-download{background:linear-gradient(135deg,#255fa8,#604fc3)!important;color:#fff!important}
  #mainApp.workspace-tool-focused .action-btn.btn-reset{background:#fff4ee!important;border-color:#efb49b!important;color:#9a3e24!important}
  .bulk-auto-launch-card{grid-column:1/5!important;display:grid;gap:10px;padding:14px;border:1px solid #b9d4df;border-radius:14px;background:linear-gradient(145deg,#f3fbfc,#f8f7ff 66%,#fff5ef);box-shadow:0 8px 22px rgba(23,52,95,.08)}
  .bulk-auto-main-picker{display:flex;align-items:center;gap:12px;min-height:96px;padding:16px;border:2px dashed #66aeb7;border-radius:12px;background:#fff;cursor:pointer}
  .bulk-auto-main-picker:hover{border-color:#6d5bd0;background:#fbfbff}
  .bulk-auto-picker-icon{font-size:34px}.bulk-auto-main-picker strong{display:block;color:#17345f;font-size:16px}.bulk-auto-main-picker small{display:block;margin-top:4px;color:#617289;line-height:1.4}
  .bulk-auto-queue-area{display:grid;gap:8px}.bulk-auto-queue-area>div:first-child{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.bulk-auto-queue-area small{color:#64748b}
  .bulk-auto-selected-files{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px}
  .bulk-auto-selected-file{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:7px 9px;border:1px solid #d3dce7;border-radius:9px;background:#fff;color:#27364b;font-size:11px}
  .bulk-auto-selected-file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bulk-auto-selected-file button{width:24px;height:24px;padding:0;border:0;border-radius:6px;background:#fff1f2;color:#b42336;font-size:16px;cursor:pointer}
  .bulk-auto-start-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bulk-auto-start-row .action-btn{min-width:220px;min-height:42px;font-size:12px!important}.bulk-auto-start-row span{color:#64748b;font-size:11px}.bulk-auto-start-row kbd{padding:2px 6px;border:1px solid #b8c5d4;border-bottom-width:2px;border-radius:5px;background:#fff;color:#27364b;font:700 10px/1.2 inherit}
  .bulk-auto-options{display:flex;gap:14px;flex-wrap:wrap;padding-top:4px;border-top:1px solid #dbe4ec}.bulk-auto-options label{font-size:11px;color:#475569}
  .bulk-auto-review-list{overflow:visible!important;max-height:none!important}
  .resume-freeform-panel{padding:12px!important}.resume-freeform-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.resume-freeform-head strong{display:block;color:#17345f;font-size:14px}.resume-freeform-head small{display:block;margin-top:3px;color:#64748b;font-size:10.5px}.resume-freeform-head>span{padding:5px 8px;border:1px solid #bfd1df;border-radius:999px;background:#f5fbff;color:#245a85;font-size:10px;font-weight:800}
  .resume-freeform-page{display:block;width:100%;min-height:520px!important;padding:28px 32px!important;resize:vertical!important;border:1px solid #cbd5e1!important;border-radius:8px!important;background:#fff!important;color:#172033!important;box-shadow:0 8px 22px rgba(23,52,95,.09)!important;font:14px/1.65 "Segoe UI",Arial,sans-serif!important;tab-size:4}
  .resume-freeform-note{display:block;margin-top:8px;color:#64748b!important;line-height:1.45}
  @media (min-width:1180px){#tab-resume>.btn-group{align-self:start!important}#tab-resume>#resumePreviewPanel{padding-left:8px!important}.resume-freeform-page{min-height:58dvh!important}}
  body.op-light #mainApp .control-panel :is(p,label,span,strong,small,li,td,th,legend,output):not(button *),
  body.op-light #mainApp .upload-box :is(p,label,span,strong,small):not(button *),
  body.op-light #mainApp .preview-box :is(p,label,span,strong,small):not(button *){color:#27364b!important}
  body.op-light #mainApp .tab-content>p,body.op-light #mainApp .tab-content>small{color:#52637a!important}
  body.op-light #mainApp :is(input,select,textarea,[contenteditable="true"]):not(.resume-preview){background:#fff!important;color:#172033!important;border-color:#9fb1c6!important}
  body.op-light #mainApp :is(input,textarea)::placeholder{color:#708197!important}
  html.op-theme-dark #mainApp.workspace-tool-focused .tab-content.active{background:linear-gradient(145deg,#0d1727,#111b2b 62%,#161827)!important;border-color:#34445a!important}
  html.op-theme-dark #mainApp.workspace-tool-focused .control-panel,html.op-theme-dark .bulk-auto-launch-card{background:#111b2b!important;border-color:#34445a!important}
  html.op-theme-dark .bulk-auto-main-picker,html.op-theme-dark .bulk-auto-selected-file{background:#172337!important;border-color:#475569!important;color:#e5e7eb!important}
  html.op-theme-dark .bulk-auto-main-picker strong,html.op-theme-dark .resume-freeform-head strong{color:#eaf2ff!important}
  html.op-theme-dark .resume-freeform-page{background:#fdfdfd!important;color:#172033!important}

/* ===== workspace-theme-contrast-safety ===== */
/* Logged-in workspace contrast safety layer. Presentation only: no workflow,
     payment, cropper, feedback or account logic is changed here. */
  html.op-theme-dark #mainApp{
    --ws-surface:#111b2b;--ws-surface-2:#172337;--ws-text:#f1f5f9;--ws-muted:#cbd5e1;
    --ws-line:#475569;--ws-input:#0b1321;
  }
  html.op-theme-dark #mainApp .tab-content.active{
    background:linear-gradient(145deg,#0f1828 0%,#111b2b 68%,#172033 100%)!important;
    color:var(--ws-text)!important;border-color:var(--ws-line)!important;box-shadow:0 14px 34px #02061788!important;
  }
  html.op-theme-dark #mainApp .tab-content :is(h1,h2,h3,h4){color:var(--ws-text)!important;-webkit-text-fill-color:initial!important;text-shadow:none!important}
  html.op-theme-dark #mainApp .tab-content :is(p,label,small,legend,output){color:var(--ws-muted)!important}
  html.op-theme-dark #mainApp .tab-content .upload-box:hover{background:#1b2a40!important;border-color:#60a5fa!important}
  html.op-theme-dark #mainApp :is(input:not([type="color"]),select,textarea,[contenteditable="true"]){background:var(--ws-input)!important;color:#f8fafc!important;border-color:var(--ws-line)!important;caret-color:#fff!important}
  html.op-theme-dark #mainApp :is(input,textarea)::placeholder{color:#94a3b8!important}
  html.op-theme-dark #mainApp select option{background:#111827!important;color:#f8fafc!important}
  html.op-theme-dark #mainApp :is(.draggable-card,.pp-five-slot){background:var(--ws-surface-2)!important;color:var(--ws-text)!important;border-color:#3c506a!important}
  html.op-theme-dark #mainApp .draggable-card .file-label{color:var(--ws-muted)!important}
  html.op-theme-dark #mainApp .mini-tool-btn{background:#22324a!important;color:#dbeafe!important;border-color:#52657d!important}
  html.op-theme-dark #mainApp .history-table-container,
  html.op-theme-dark #mainApp .history-table{background:var(--ws-surface)!important;color:var(--ws-text)!important;border-color:var(--ws-line)!important}
  html.op-theme-dark #mainApp .history-table th{background:#223249!important;color:#bae6fd!important;border-color:var(--ws-line)!important}
  html.op-theme-dark #mainApp .history-table td{background:#111b2b!important;color:var(--ws-text)!important;border-color:#334155!important}
  html.op-theme-dark #mainApp .history-table tr:nth-child(even) td{background:#162236!important}
  html.op-theme-dark #mainApp .history-table tr:hover td{background:#213149!important}
  
  
  
  
  
  html.op-theme-dark #mainApp #tab-my-account :is(#referralPanel,.account-support-actions){background:#10252a!important;color:var(--ws-text)!important;border-color:#2f7776!important}
  html.op-theme-dark #mainApp #tab-my-account :is(#referralPanel,.account-support-actions) :is(h2,h3,h4,strong,p,label,span,small){color:var(--ws-text)!important}
  html.op-theme-dark #mainApp #tab-my-account :is(#referralPanel,.account-support-actions) small{color:var(--ws-muted)!important}
  html.op-theme-dark #mainApp :is(.quick-utility-btn,.customize-tools-btn){background:#172337!important;color:#f8fafc!important;border-color:#52657d!important}
  html.op-theme-dark #mainApp .portal-quick-utilities .quick-utility-btn{background:#172337!important;color:#f8fafc!important;border-color:#52657d!important}
  html.op-theme-dark #mainApp :is(.quick-utility-btn,.customize-tools-btn):hover{background:#243650!important;border-color:#60a5fa!important}
  html.op-theme-dark #mainApp #ppGeminiBundlePreviewPanel,
  html.op-theme-dark #mainApp #resumeTemplatePicker,
  html.op-theme-dark #mainApp #pdf-premium-card{background:#111b2b!important;color:var(--ws-text)!important;border-color:var(--ws-line)!important}
  html.op-theme-dark #mainApp #resumeTemplatePicker :is(strong,b,span,small),
  html.op-theme-dark #mainApp #pdf-premium-card :is(h2,h3,p,span,strong,small,label){color:var(--ws-text)!important}
  html.op-theme-dark #mainApp dialog{background:#111b2b!important;color:var(--ws-text)!important;border-color:var(--ws-line)!important}
  html.op-theme-dark #mainApp dialog :is(h1,h2,h3,h4,p,label,span,strong,small){color:var(--ws-text)!important}

  /* PDF editor chrome follows dark mode; the actual PDF page/canvas stays white. */
  html.op-theme-dark #mainApp #np-editor{background:#0f172a!important;color:var(--ws-text)!important;border-color:var(--ws-line)!important}
  html.op-theme-dark #mainApp #np-editor :is(.np-head,.np-filebar,.np-server-bar,.np-toolbar,.np-panel,.np-pages,.np-view-actions,.np-unlock-tools,#np-image-crop-controls,#np-form-panel,#np-status){background:#172337!important;color:var(--ws-text)!important;border-color:var(--ws-line)!important}
  html.op-theme-dark #mainApp #np-editor :is(h2,h3,strong,p,label,span,small){color:var(--ws-text)!important}
  html.op-theme-dark #mainApp #np-editor :is(.np-server-status,.np-server-divider,.np-unlock-status,.np-original-style,.np-zoom-readout,#np-name,#np-page-label){color:var(--ws-muted)!important}
  html.op-theme-dark #mainApp #np-editor button{background:#22324a!important;color:#f8fafc!important;border-color:#52657d!important}
  html.op-theme-dark #mainApp #np-editor button:hover:not(:disabled){background:#304662!important}
  html.op-theme-dark #mainApp #np-editor button[aria-pressed="true"],html.op-theme-dark #mainApp #np-editor .np-primary{background:#0f766e!important;color:#fff!important;border-color:#2dd4bf!important}
  html.op-theme-dark #mainApp #np-editor :is(input,select,textarea){background:#0b1321!important;color:#f8fafc!important;border-color:#52657d!important}
  html.op-theme-dark #mainApp #np-editor #np-scroll{background:#243244!important}
  html.op-theme-dark #mainApp #np-editor .np-document.np-expanded{background:#243244!important}
  html.op-theme-dark #mainApp #np-editor :is(#np-wrap,#np-canvas,.np-document canvas){background:#fff!important}
  html.op-theme-dark #mainApp #np-editor #np-inline{color:#111827!important}

  /* Light mode contrast fixes for components that have their own dark/light chrome. */
  body.op-light #mainApp #pdf-premium-card{background:#f8fbfd!important;color:#111827!important;border-color:#9fb2cc!important}
  body.op-light #mainApp #pdf-premium-card :is(h2,h3,p,span,strong,small,label){color:#172033!important}
  body.op-light #mainApp #resumeTemplatePicker{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
  body.op-light #mainApp #resumeTemplatePicker :is(strong,b,span,small){color:#334155!important}
  body.op-light #mainApp #tab-my-account :is(#referralPanel,.account-support-actions) :is(h2,h3,h4,strong,p,label,span,small){color:#172033!important}
  body.op-light #mainApp #tab-my-account :is(#referralPanel,.account-support-actions) small{color:#475569!important}
  body.op-light #mainApp :is(.pdf-unlock-shell,.pdf-office-shell) :is(h1,h2,h3,h4,strong,p,label,span,small){color:#172033!important}
  body.op-light #mainApp .pro-pdf-editor{color:#e5e7eb!important}
  body.op-light #mainApp .pro-pdf-editor :is(.pro-pdf-head,.pro-pdf-filebar,.pro-pdf-toolbar,.pro-pdf-sidebar,.pro-pdf-selection-info,.pro-pdf-stage,.pro-pdf-preview) :is(h1,h2,h3,h4,p,label,span,strong,small){color:#e5e7eb!important}
  body.op-light #mainApp .pro-pdf-editor :is(.pro-pdf-upload,button){color:#f8fafc!important}
  body.op-light #mainApp .pro-pdf-editor :is(input,select,textarea){color:#f8fafc!important;background:#0f172a!important;border-color:#64748b!important}
  body.op-light #mainApp .pro-pdf-editor .pro-pdf-overlay.pro-text-overlay{color:#111827!important}
  body.op-light #mainApp #np-editor{color:#25334a!important}
  body.op-light #mainApp #np-editor :is(h2,h3,strong,p,label,span,small){color:#334155!important}
  body.op-light #mainApp #np-editor button{color:#23344d!important;background:#fff!important;border-color:#c6d1df!important}
  body.op-light #mainApp #np-editor button:hover:not(:disabled){background:#e8f1fb!important}
  body.op-light #mainApp #np-editor :is(input,select,textarea){background:#fff!important;color:#172a41!important;border-color:#94a3b8!important}
  body.op-light #mainApp #np-editor :is(.np-server-status,.np-server-divider,.np-unlock-status,.np-original-style,.np-zoom-readout,#np-name,#np-page-label){color:#475569!important}
  body.op-light #mainApp #np-empty>div{color:#526b82!important}

/* ===== portal-theme-contrast-final-v2 ===== */
/* Final contrast normalization. Presentation only: no auth, payment, crop,
     storage, language, PDF or network behaviour is changed by this layer. */

  /* Light surfaces: readable dark ink. Keep intentionally coloured action
     buttons/header controls on their own high-contrast foregrounds. */
  body.op-light{color-scheme:light}
  body.op-light #mainApp .bulk-auto-review-row{
    background:#f8fbfd!important;border-color:#b9ceda!important;color:#172033!important;
  }
  body.op-light #mainApp .bulk-auto-review-page{color:#172033!important}
  body.op-light #mainApp .bulk-auto-review-meta{color:#52627a!important}
  body.op-light #mainApp #bulkAutoStatus{color:#075985!important}
  body.op-light #mainApp #bulkAutoStatus[data-error="true"]{color:#b91c1c!important}
  body.op-light #mainApp #bulkAutoReviewSummary{color:#475569!important}

  
  
  
  
  
  

  body.op-light .account-chat-dialog :is(label,strong,span){color:#334155!important}
  body.op-light .account-chat-dialog #accountChatStatus{color:#0f766e!important}
  body.op-light .refund-request-dialog :is(label,strong,span){color:#334155!important}
  body.op-light .refund-request-dialog #refundRequestStatus{color:#475569!important}
  body.op-light .refund-request-dialog #refundRequestStatus[data-error="true"]{color:#b91c1c!important}
  body.op-light :is(.account-chat-dialog,.refund-request-dialog) input[type="file"]{color:#334155!important}

  body.op-light #mainApp .dashboard-card:after{color:#475569!important}

  /* Dark surfaces: restore light foregrounds for standalone dialogs and the
     Bulk review rows, including dialogs that may be moved outside #mainApp. */
  html.op-theme-dark #mainApp .bulk-auto-review-row{
    background:#172337!important;border-color:#475569!important;color:#f1f5f9!important;
  }
  html.op-theme-dark #mainApp .bulk-auto-review-page{color:#f1f5f9!important}
  html.op-theme-dark #mainApp .bulk-auto-review-meta{color:#cbd5e1!important}
  html.op-theme-dark #mainApp #bulkAutoStatus{color:#bfdbfe!important}
  html.op-theme-dark #mainApp #bulkAutoStatus[data-error="true"]{color:#fecaca!important}
  html.op-theme-dark #mainApp #bulkAutoReviewSummary{color:#cbd5e1!important}

  html.op-theme-dark body .account-chat-dialog,
  html.op-theme-dark body .refund-request-dialog{
    background:linear-gradient(145deg,#172033,#0f172a)!important;color:#e2e8f0!important;border-color:#475569!important;
  }
  html.op-theme-dark body .account-chat-dialog :is(h3,p,label,strong,span),
  html.op-theme-dark body .refund-request-dialog :is(h3,p,label,strong,span){color:#e2e8f0!important}
  html.op-theme-dark body :is(.account-chat-dialog,.refund-request-dialog) :is(input,select,textarea){background:#07111f!important;color:#f8fafc!important;border-color:#52657d!important}
  html.op-theme-dark body .account-chat-dialog #accountChatStatus{color:#a7f3d0!important}
  html.op-theme-dark body .refund-request-dialog #refundRequestStatus{color:#cbd5e1!important}

  @media(max-width:620px){
    #mainApp .bulk-auto-review-row{grid-template-columns:1fr!important}
    #mainApp .bulk-auto-review-meta{text-align:left!important}
  }

/* ===== portal-contrast-integrity-v3 ===== */
/* Light-theme contrast integrity. Presentation only. Keep dark theme and
     action-button foregrounds unchanged while making light cards readable. */
  body.op-light #signUpScreen #registrationOtpGate,
  body.op-light #signUpScreen #registrationPaymentSection{
    background:#f8fbfd!important;border-color:#b9ceda!important;color:#334155!important;
  }
  body.op-light #signUpScreen #registrationOtpGate :is(label,p,small,span,div),
  body.op-light #signUpScreen #registrationPaymentSection :is(label,p,small,span){color:#334155!important}
  body.op-light #signUpScreen #registrationOtpStatus,
  body.op-light #signUpScreen #paymentCheckoutStatus{color:#475569!important}
  body.op-light #signUpScreen #trialRegistrationPanel{
    background:linear-gradient(135deg,#ecfdf5,#f0fdfa)!important;border-color:#86d9bd!important;color:#1f3f35!important;
  }
  body.op-light #signUpScreen #trialRegistrationPanel>div:first-child{color:#166534!important}
  body.op-light #signUpScreen #trialRegistrationPanel :is(div,label,span){color:#334155!important}
  body.op-light #signUpScreen #razorpaySignupPanel{
    background:linear-gradient(135deg,#eff6ff,#ecfdf5)!important;border-color:#93bce8!important;color:#24364b!important;
  }
  body.op-light #signUpScreen #razorpaySignupPanel>div:first-child{color:#1d4ed8!important}
  body.op-light #signUpScreen #razorpaySignupPanel :is(div,label,span,p,small){color:#334155!important}
  body.op-light #signUpScreen #razorpayPlanSummary{color:#172033!important}
  #signUpScreen .signup-checkout-btn{background:linear-gradient(135deg,#2563eb,#16a34a)!important;color:#fff!important}
  #signUpScreen .signup-trial-btn{background:linear-gradient(135deg,#10b981,#0f766e)!important;color:#fff!important}
  body.op-light #signUpScreen .signup-policy-consent{background:#fff!important;border-color:#93bce8!important;color:#334155!important}
  body.op-light #signUpScreen .signup-policy-consent a{color:#1d4ed8!important}
  body.op-light #signUpScreen .refund-agreement-surface{background:#fff!important;border-color:#b9ceda!important;color:#334155!important}
  body.op-light #signUpScreen .refund-agreement-surface :is(strong,p,span){color:#334155!important}
  body.op-light #signUpScreen :is(#trialRegistrationPanel,#razorpaySignupPanel,#registrationPaymentSection) a{color:#1d4ed8!important;text-decoration-color:#60a5fa!important}
  body.op-light #signUpScreen :is(#trialRegistrationPanel,#razorpaySignupPanel) :is(.login-btn,.payment-plan-choice),
  body.op-light #signUpScreen :is(#trialRegistrationPanel,#razorpaySignupPanel) :is(.login-btn,.payment-plan-choice) :is(strong,small,span){color:#fff!important}
  body.op-light #signUpScreen #referralAttribution{background:#eff6ff!important;border-color:#93c5fd!important;color:#334155!important}
  body.op-light #signUpScreen #referralAttribution :is(div,input){color:#334155!important}

  /* Standalone account dialogs are moved to body so they remain visible even
     when the My Account tab itself is hidden. Keep them centered and readable. */
  body>.account-chat-dialog,body>.refund-request-dialog{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-height:86vh;overflow:auto;
  }
  body.op-light>.account-chat-dialog,body.op-light>.refund-request-dialog{
    background:linear-gradient(145deg,#fff,#f7fbfd 65%,#fff7ef)!important;color:#172033!important;border-color:#c3d8e2!important;
  }
  body.op-light>.account-chat-dialog :is(h2,h3,h4){color:#17345f!important}
  body.op-light>.account-chat-dialog :is(p,label,small){color:#475569!important}
  body.op-light>.account-chat-dialog :is(textarea,input[type="text"],input[type="email"],input[type="file"],select){background:#f8fbfd!important;color:#172033!important;border-color:#b9ceda!important}
  body.op-light>.account-chat-dialog :is(a){color:#1d4ed8!important}
  body.op-light #purchaseHistoryClose,body.op-light #accountDeleteRequestClose{color:#334155!important}
  body.op-light #purchaseHistoryStatus,body.op-light #trialUpgradeStatus{color:#475569!important}
  body.op-light #purchaseHistoryDialog .purchase-history-card{background:#fff!important;border-color:#cbd5e1!important;box-shadow:0 8px 20px rgba(35,55,79,.08)!important}
  body.op-light #purchaseHistoryDialog .purchase-history-plan-title{color:#17345f!important}
  body.op-light #purchaseHistoryDialog .purchase-history-meta,
  body.op-light #purchaseHistoryDialog .purchase-history-key{color:#64748b!important}
  body.op-light #purchaseHistoryDialog .purchase-history-value{color:#172033!important}
  body.op-light #purchaseHistoryDialog .purchase-history-amount{color:#166534!important}
  body.op-light #purchaseHistoryDialog .purchase-history-empty{background:#f8fbfd!important;border-color:#94a3b8!important;color:#475569!important}
  body.op-light #accountDeleteRequestDialog p{color:#475569!important}
  body.op-light #accountChatDialog #accountChatStatus{color:#0f766e!important}

  /* A few recurring light workspace surfaces previously inherited pale
     dark-theme copy. Normalize text only; controls keep their own colors. */
  body.op-light #mainApp #referralPanel :is(p,label,small){color:#475569!important}
  body.op-light #mainApp #referralPanel h3{color:#0f4c5c!important}
  body.op-light #mainApp .account-support-actions small{color:#475569!important}
  body.op-light #mainApp #accountStatus,
  body.op-light #mainApp #referralStatus{color:#0f766e!important}

/* ===== safe-low-cpu-performance ===== */
/* Purely decorative workspace motion is static for everyone. This removes
     continuous repaint/compositing while preserving every control and layout. */
  #mainApp::before{animation:none!important}
  #mainApp .container{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

  /* Automatic lightweight rendering on constrained devices. No crop, PDF,
     auth, payment, language or data logic is changed by this class. */
  html.op-performance-lite *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.op-performance-lite dialog::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.op-performance-lite #loginScreen.front-home::before,
  html.op-performance-lite #mainApp::before{display:none!important}
  html.op-performance-lite #loginScreen.front-home .front-hero::after,
  html.op-performance-lite #loginScreen.front-home .front-highlights .front-highlight,
  html.op-performance-lite .reference-dashboard-surface::before,
  html.op-performance-lite .reference-dashboard-surface::after,
  html.op-performance-lite .reference-orbit,
  html.op-performance-lite .reference-floating-card,
  html.op-performance-lite .reference-spark,
  html.op-performance-lite #loginScreen.front-home .skillo-brand,
  html.op-performance-lite .front-auth-nav-actions,
  html.op-performance-lite #loginScreen.front-home .catalog-secure-note,
  html.op-performance-lite #loginScreen.front-home .catalog-secure-note::after,
  html.op-performance-lite #mainApp .new-distributor-alert span{animation:none!important}
  html.op-performance-lite #mainApp,
  html.op-performance-lite #mainApp .portal-tool-sidebar,
  html.op-performance-lite #mainApp .dashboard-tool-launcher,
  html.op-performance-lite #mainApp .dashboard-card,
  html.op-performance-lite #mainApp .tab-content.active,
  html.op-performance-lite #mainApp .container{box-shadow:none!important}
  html.op-performance-lite .reference-dashboard-surface::before,
  html.op-performance-lite .reference-floating-card,
  html.op-performance-lite .reference-spark{filter:none!important}

  /* A hidden tab does not need decorative animation/compositing. Functional
     listening/progress animations are deliberately not included here. */
  html.op-page-hidden #loginScreen.front-home::before,
  html.op-page-hidden #mainApp::before,
  html.op-page-hidden #loginScreen.front-home .front-hero::after,
  html.op-page-hidden #loginScreen.front-home .front-highlights .front-highlight,
  html.op-page-hidden .reference-dashboard-surface::before,
  html.op-page-hidden .reference-dashboard-surface::after,
  html.op-page-hidden .reference-orbit,
  html.op-page-hidden .reference-floating-card,
  html.op-page-hidden .reference-spark,
  html.op-page-hidden #loginScreen.front-home .skillo-brand,
  html.op-page-hidden .front-auth-nav-actions,
  html.op-page-hidden #loginScreen.front-home .catalog-secure-note,
  html.op-page-hidden #loginScreen.front-home .catalog-secure-note::after,
  html.op-page-hidden #mainApp .new-distributor-alert span{animation-play-state:paused!important}


  /* Public landing footer harmony pass — scoped to the three compact bottom
     surfaces only. No tool/auth/payment/location behavior is changed. */
  body.public-landing-active #loginScreen.front-home > #landingPolicyStrip,
  body.public-landing-active #loginScreen.front-home > #landingMetrics,
  body.public-landing-active #loginScreen.front-home > .op-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 1px solid #d7e5eb !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 20px rgba(35,55,79,.07) !important;
  }
  body.public-landing-active #loginScreen.front-home > #landingPolicyStrip {
    min-height: 42px !important;
    margin-top: 6px !important;
    padding: 7px 12px !important;
    border-radius: 12px !important;
  }
  body.public-landing-active #loginScreen.front-home > #landingMetrics {
    min-height: 42px !important;
    margin-top: 6px !important;
    padding: 7px 12px !important;
    border-radius: 12px !important;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer {
    min-height: 42px !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 0 12px !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 8px 20px rgba(35,55,79,.07), 0 -1px 0 rgba(31,108,196,.04) !important;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .op-footer-bottom {
    min-height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 0 !important;
  }
  @media (min-width: 851px) {
    body.public-landing-active {
      padding-bottom: 0 !important;
    }
    body.public-landing-active #loginScreen.front-home {
      padding-bottom: 0 !important;
    }
  }
  @media (min-width: 1100px) {
    body.public-landing-active #loginScreen.front-home > #landingPolicyStrip,
    body.public-landing-active #loginScreen.front-home > #landingMetrics,
    body.public-landing-active #loginScreen.front-home > .op-footer {
      margin-top: 5px !important;
    }
  }
  @media (max-width: 850px) {
    body.public-landing-active #loginScreen.front-home > #landingPolicyStrip,
    body.public-landing-active #loginScreen.front-home > #landingMetrics,
    body.public-landing-active #loginScreen.front-home > .op-footer {
      width: 100% !important;
    }
  }

/* ===== desktop-final-polish-v103 ===== */
.basic-scan-upload-actions{flex:1 0 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:1048px;margin:0 auto}
  .basic-scan-upload-btn{min-height:34px!important;padding:7px 10px!important;font-size:10.5px!important}
  .basic-scan-status{flex:1 0 100%;min-height:18px;margin:0;text-align:center;color:var(--accent-blue);font-size:11px}
  .pp-five-slot .pp-five-actions{justify-content:center;gap:5px}
  .pp-five-slot .pp-five-actions .action-btn{flex:0 1 auto!important;min-height:28px!important;padding:5px 8px!important;font-size:10px!important;border-radius:7px!important}
  @media(max-width:720px){.basic-scan-upload-actions{grid-template-columns:1fr}}
  @media(min-width:1180px){
    #tab-cards>.basic-card-primary-actions{justify-content:center!important;align-items:center!important;align-self:start!important;gap:6px!important;padding:2px 0!important;margin-top:0!important}
    #tab-cards>#basicCardPreview{margin-bottom:0!important}
    #tab-cards>div:has(#a4Canvas){display:flex!important;flex-direction:column;align-items:center;gap:7px;margin-top:0!important;padding-top:8px!important}
    #tab-cards>div:has(#a4Canvas)>h3{margin:0!important}
    #tab-cards>div:has(#a4Canvas)>div:has(>#a4Canvas){margin:0 auto!important}
    #tab-cards>div:has(#a4Canvas)>.btn-group{justify-content:center!important;margin:0!important;gap:6px!important}
    #mainApp.workspace-tool-focused #bulkAutoReviewPanel{max-height:62dvh!important;overflow:hidden!important;overscroll-behavior:contain!important}
    #bulkAutoReviewList{max-height:44dvh!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important;padding-right:4px}
    #tab-4x6>.upload-section{justify-content:center!important;align-items:center!important;align-self:start!important;gap:6px!important}
    #tab-4x6>.upload-section .upload-box{flex:0 1 380px!important;margin:0 auto!important}
    #tab-4x6>.preview-container{justify-content:center!important;align-items:center!important;margin:0!important}
    #tab-4x6>.preview-container .preview-box{flex:0 1 330px!important;margin:0 auto!important;text-align:center}
    #tab-4x6>.control-panel{text-align:center!important;align-self:start!important}
    #tab-4x6>.btn-group{justify-content:center!important;align-items:center!important;align-self:start!important;gap:6px!important}
    #tab-4x6>div:has(#a4_4x6_SheetCanvas){padding-top:8px!important}
  }



/* ===== card-generator-alignment-v104 ===== */
@media (min-width:1180px){
  #tab-cards>h1{
    grid-column:1/-1!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    width:max-content!important;
    max-width:42%!important;
    text-align:center!important;
    z-index:1;
    pointer-events:none;
  }
  #tab-cards>.badge,#tab-cards>h1+p{position:relative;z-index:2}

  #tab-cards>.basic-card-primary-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:6px!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    padding:0!important;
  }
  #tab-cards>.basic-card-primary-actions>.action-btn{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    justify-self:stretch!important;
  }

  #tab-cards>div:has(#a4Canvas) .portal-a4-preview-viewport{
    height:auto!important;
    min-height:0!important;
    max-height:min(58dvh,650px)!important;
    margin:4px auto 5px!important;
  }
  #tab-cards>div:has(#a4Canvas)>.btn-group{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}


/* ===== common-result-preview-popup-v1 ===== */
.portal-result-preview-dialog{
  width:min(96vw,1180px);height:min(94dvh,920px);max-width:none;max-height:none;
  padding:0;border:1px solid var(--border-color,#cbd5e1);border-radius:18px;
  background:var(--panel,#fff);color:var(--text,#0f172a);box-shadow:0 28px 80px rgba(15,23,42,.35);
}
.portal-result-preview-dialog::backdrop{background:rgba(15,23,42,.68);backdrop-filter:blur(3px)}
.portal-result-preview-shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
.portal-result-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--border-color,#e2e8f0)}
.portal-result-preview-header h2{margin:0;font-size:18px;line-height:1.25;text-align:left}
.portal-result-preview-toolbar{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 12px;background:var(--panel-2,#f8fafc);border-bottom:1px solid var(--border-color,#e2e8f0);font-size:11px;font-weight:800;letter-spacing:.08em}
.portal-result-preview-control{min-width:42px;height:36px;padding:0 12px;border:1px solid #5bc0de;border-radius:9px;background:#173244;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.portal-result-preview-control:hover{filter:brightness(1.08)}
.portal-result-preview-close{min-width:88px;background:#334155;border-color:#64748b}
.portal-result-preview-readout{min-width:54px;text-align:center;font-size:12px;letter-spacing:0;color:var(--text,#0f172a)}
.portal-result-preview-viewport{min-height:0;overflow:auto;padding:16px;background:#e8eef5;overscroll-behavior:contain}
.portal-result-preview-stage{min-width:100%;min-height:100%;display:flex;align-items:flex-start;justify-content:center}
.portal-result-preview-media,.portal-result-preview-document{display:block;background:#fff;box-shadow:0 12px 34px rgba(15,23,42,.22);transform-origin:top center;image-rendering:auto}
.portal-result-preview-document{box-sizing:border-box;padding:18px;color:#111827}
@media(max-width:720px){
  .portal-result-preview-dialog{width:100vw;height:100dvh;border:0;border-radius:0}
  .portal-result-preview-header{padding:11px 12px 8px}
  .portal-result-preview-header h2{font-size:15px}
  .portal-result-preview-toolbar{gap:6px;padding:7px 8px}
  .portal-result-preview-control{height:34px;min-width:38px;padding:0 9px}
  .portal-result-preview-viewport{padding:10px}
}


/* ===== workspace-top-shell-hard-lock =====
   Final source-order authority for authenticated workspace geometry.
   Header/Workspace/Global Message are direct top-shell children and never depend
   on display:contents or nested grid-item promotion. */
#mainApp:is([style*="display: block"],[style*="display: grid"]):not(.workspace-tool-focused):not(.public-free-mode){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "maintenance"
    "top"
    "aux"
    "tools"!important;
  grid-template-rows:repeat(4,min-content)!important;
  grid-auto-flow:row!important;
  align-content:start!important;
  align-items:start!important;
  column-gap:14px!important;
  row-gap:14px!important;
}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>#maintenanceBanner{
  grid-area:maintenance!important;grid-column:auto!important;grid-row:auto!important;order:initial!important;margin:0!important
}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.workspace-top-shell{
  grid-area:top!important;grid-column:auto!important;grid-row:auto!important;order:initial!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;
  width:100%!important;min-width:0!important;margin:0!important;padding:0!important;
  position:relative!important;top:auto!important;transform:none!important;z-index:45!important
}
#mainApp .workspace-top-shell>.workspace-header-row{
  position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;
  width:100%!important;min-width:0!important;margin:0!important;z-index:2!important
}
#mainApp .workspace-top-shell>#globalNoticeBanner{
  position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;
  width:100%!important;min-width:0!important;margin:0!important;z-index:1!important
}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.container{
  grid-area:aux!important;grid-column:auto!important;grid-row:auto!important;order:initial!important;
  display:block!important;width:100%!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important
}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.container .tab-nav,
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.container .tab-content{display:none!important}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.container>#newDistributorAlert,
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.container>#locationVerificationBanner,
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.container>#distributorNoticeBanner{
  width:100%!important;min-width:0!important;grid-column:auto!important;grid-row:auto!important;order:initial!important
}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.workspace-tool-grid{
  grid-area:tools!important;grid-column:auto!important;grid-row:auto!important;order:initial!important;
  align-self:start!important;justify-self:stretch!important;margin:0!important
}

/* Operation pages keep the same top shell above the active tool. */
#mainApp.workspace-tool-focused>.workspace-top-shell{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;
  width:100%!important;max-width:none!important;min-width:0!important;margin:0 0 10px!important;padding:0!important;
  position:sticky!important;top:0!important;z-index:80!important
}
#mainApp.workspace-tool-focused>.workspace-top-shell>.workspace-header-row{
  position:relative!important;top:auto!important;transform:none!important;margin:0!important
}
#mainApp.workspace-tool-focused>.workspace-top-shell>#globalNoticeBanner{
  position:relative!important;top:auto!important;transform:none!important;margin:0!important
}

@media(max-width:900px){
  #mainApp:is([style*="display: block"],[style*="display: grid"]):not(.workspace-tool-focused):not(.public-free-mode){
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "maintenance"
      "top"
      "aux"
      "tools"!important;
    grid-template-rows:repeat(4,min-content)!important
  }
  #mainApp .workspace-top-shell>.workspace-header-row{position:relative!important;top:auto!important}
}


/* ===== workspace-canvas-clean-dashboard-notice =====
   Remove the legacy grey/gradient backing layer from the authenticated app.
   The dashboard canvas is solid white in light mode and near-black in dark mode.
   Global Admin Message stays in the shared authenticated top shell. */
html.workspace-route.session-bootstrap:not(.op-theme-dark),
html.workspace-route.session-bootstrap:not(.op-theme-dark) body,
html.workspace-route.session-bootstrap body.op-light,
body.op-light:has(#mainApp[style*="display: block"]),
body.op-light:has(#mainApp[style*="display: grid"]){
  background:#ffffff!important;
  background-image:none!important;
}
body.op-light #mainApp,
body.op-light #mainApp[style*="display: block"],
body.op-light #mainApp[style*="display: grid"]{
  background:#ffffff!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
body.op-light #mainApp>.workspace-top-shell,
body.op-light #mainApp>.container{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
html.workspace-route.session-bootstrap.op-theme-dark,
html.workspace-route.session-bootstrap.op-theme-dark body,
html.op-theme-dark,
html.op-theme-dark body,
html.op-theme-dark body #mainApp,
html.op-theme-dark body #mainApp[style*="display: block"],
html.op-theme-dark body #mainApp[style*="display: grid"]{
  background:#05070b!important;
  background-image:none!important;
}
html.op-theme-dark body #mainApp{
  border-color:#18202b!important;
  box-shadow:none!important;
}
html.op-theme-dark #mainApp>.workspace-top-shell,
html.op-theme-dark #mainApp>.container{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* ===== workspace-strip-top-shell-v1 =====
   Final authority for the compact authenticated top shell:
   Header -> Workspace navigation strip -> Global Message -> active content.
   The same structure is shared by web and desktop operation views. */
#mainApp:is([style*="display: block"],[style*="display: grid"]):not(.public-free-mode):not(.workspace-tool-focused){
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "maintenance"
    "top"
    "aux"
    "tools"!important;
  grid-template-rows:repeat(4,min-content)!important;
  row-gap:12px!important;
}
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.workspace-tool-grid{
  grid-area:tools!important;
  width:100%!important;
}
#mainApp .workspace-top-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
}
#mainApp .workspace-top-shell>.workspace-header-row{order:1!important}
#mainApp .workspace-top-shell>.portal-tool-sidebar{
  order:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:44px!important;
  max-height:none!important;
  margin:0!important;
  padding:7px 10px!important;
  position:relative!important;
  top:auto!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  border:1px solid #d9e1ec!important;
  border-radius:8px!important;
  background:#f8fafc!important;
  box-shadow:0 4px 12px rgba(15,23,42,.06)!important;
}
#mainApp .workspace-top-shell>.portal-tool-sidebar .portal-sidebar-heading{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0 6px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#mainApp .workspace-top-shell>.portal-tool-sidebar .portal-sidebar-heading span{
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:1.4px!important;
  color:#334155!important;
}
#mainApp .workspace-top-shell>.portal-tool-sidebar .portal-quick-utilities,
#mainApp .workspace-top-shell>.portal-tool-sidebar .workspace-sidebar-links{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#mainApp .workspace-top-shell>.portal-tool-sidebar .portal-quick-utilities{flex:1 1 300px!important}
#mainApp .workspace-top-shell>.portal-tool-sidebar .workspace-sidebar-links{
  flex:0 1 auto!important;
  margin-left:auto!important;
}
#mainApp .workspace-top-shell>.portal-tool-sidebar .workspace-sidebar-links button{
  width:auto!important;
  min-width:auto!important;
  margin:0!important;
}
#mainApp .workspace-top-shell>#globalNoticeBanner{order:3!important}

/* Current request: Global Message remains under Workspace on dashboard and operation panels. */
#mainApp.workspace-tool-focused #globalNoticeBanner:not([hidden]),
#mainApp:not(.workspace-tool-focused):not(.public-free-mode) #globalNoticeBanner:not([hidden]){
  display:block!important;
}
#mainApp.public-free-mode #globalNoticeBanner{display:none!important}

html.op-theme-dark #mainApp .workspace-top-shell>.portal-tool-sidebar{
  background:#0b111b!important;
  border-color:#263244!important;
  box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
}
html.op-theme-dark #mainApp .workspace-top-shell>.portal-tool-sidebar .portal-sidebar-heading span{
  color:#dbeafe!important;
}

@media(max-width:900px){
  #mainApp:is([style*="display: block"],[style*="display: grid"]):not(.public-free-mode):not(.workspace-tool-focused){
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"maintenance" "top" "aux" "tools"!important;
    grid-template-rows:repeat(4,min-content)!important;
  }
  #mainApp .workspace-top-shell>.portal-tool-sidebar{
    align-items:flex-start!important;
    padding:8px!important;
  }
  #mainApp .workspace-top-shell>.portal-tool-sidebar .portal-sidebar-heading{
    flex:1 1 100%!important;
  }
  #mainApp .workspace-top-shell>.portal-tool-sidebar .portal-quick-utilities{
    flex:1 1 100%!important;
  }
  #mainApp .workspace-top-shell>.portal-tool-sidebar .workspace-sidebar-links{
    flex:1 1 100%!important;
    margin-left:0!important;
  }
}


/* ===== workspace-header-return-pin-v1 =====
   Prevent browser scroll anchoring from preserving the sticky operation-page
   offset after Back to Tools restores the normal dashboard shell. */
#mainApp:not(.workspace-tool-focused):not(.public-free-mode),
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.workspace-top-shell,
#mainApp:not(.workspace-tool-focused):not(.public-free-mode)>.workspace-tool-grid{
  overflow-anchor:none!important;
}


/* ===== operation-workspace-roll-strip-v1 =====
   Dashboard: full Workspace strip. Operation pages: compact Workspace button
   that expands the same strip horizontally on demand. */
#mainApp .workspace-top-shell>.portal-tool-sidebar .workspace-strip-toggle{
  appearance:none!important;
  -webkit-appearance:none!important;
  font:inherit!important;
  color:inherit!important;
}
#mainApp .workspace-strip-chevron{
  display:none;
  font-size:16px;
  line-height:1;
  transition:transform .28s ease;
}
#mainApp.workspace-tool-focused:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar{
  width:142px!important;
  max-width:142px!important;
  min-width:142px!important;
  justify-self:start!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
  transition:width .34s cubic-bezier(.22,.8,.25,1),max-width .34s cubic-bezier(.22,.8,.25,1),box-shadow .22s ease!important;
}
#mainApp.workspace-tool-focused:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-strip-toggle{
  width:100%!important;
  min-width:0!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:7px 9px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
#mainApp.workspace-tool-focused:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-strip-chevron{
  display:inline-block!important;
  transform:rotate(0deg);
}
#mainApp.workspace-tool-focused:not(.public-free-mode):not(.workspace-strip-expanded)>.workspace-top-shell>.portal-tool-sidebar :is(.portal-quick-utilities,.workspace-sidebar-links){
  flex:0 0 0!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  opacity:0!important;
  visibility:hidden!important;
  overflow:hidden!important;
  pointer-events:none!important;
  transform:translateX(-10px) scaleX(.96);
}
#mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
#mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-strip-toggle{
  width:auto!important;
  justify-content:flex-start!important;
}
#mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-strip-chevron{
  transform:rotate(180deg);
}
#mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .portal-quick-utilities{
  flex:1 1 300px!important;
}
#mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-sidebar-links{
  flex:0 1 auto!important;
  margin-left:auto!important;
}
#mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar :is(.portal-quick-utilities,.workspace-sidebar-links){
  width:auto!important;
  max-width:none!important;
  max-height:120px!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  transition:opacity .2s ease .08s,transform .28s ease .04s!important;
}
#mainApp:not(.workspace-tool-focused) .workspace-strip-toggle,
#mainApp.public-free-mode .workspace-strip-toggle{
  cursor:default!important;
}
@media(max-width:900px){
  #mainApp.workspace-tool-focused:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar{
    width:136px!important;
    max-width:136px!important;
    min-width:136px!important;
    align-items:center!important;
    padding:7px 9px!important;
  }
  #mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  #mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-strip-toggle{
    flex:1 1 100%!important;
    justify-content:flex-start!important;
  }
  #mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .portal-quick-utilities,
  #mainApp.workspace-tool-focused.workspace-strip-expanded:not(.public-free-mode)>.workspace-top-shell>.portal-tool-sidebar .workspace-sidebar-links{
    flex:1 1 100%!important;
    margin-left:0!important;
  }
}


/* ===== global-desktop-empty-space-cleanup-v1 =====
   Final outer-canvas authority. Keep functional panel spacing intact while
   removing legacy viewport centering, decorative overflow and bottom/side bands. */
#mainApp::before{
  content:none!important;
  display:none!important;
  background:none!important;
  filter:none!important;
  animation:none!important;
}
body:has(#mainApp[style*="display: block"]),
body:has(#mainApp[style*="display: grid"]){
  margin:0!important;
  padding:0!important;
  min-height:100dvh!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  overflow-x:hidden!important;
}
html:not(.op-theme-dark) body:has(#mainApp[style*="display: block"]),
html:not(.op-theme-dark) body:has(#mainApp[style*="display: grid"]),
html:not(.op-theme-dark) body:has(#mainApp[style*="display: block"]) #mainApp,
html:not(.op-theme-dark) body:has(#mainApp[style*="display: grid"]) #mainApp{
  background:#fff!important;
  background-image:none!important;
}
html.op-theme-dark body:has(#mainApp[style*="display: block"]),
html.op-theme-dark body:has(#mainApp[style*="display: grid"]),
html.op-theme-dark body:has(#mainApp[style*="display: block"]) #mainApp,
html.op-theme-dark body:has(#mainApp[style*="display: grid"]) #mainApp{
  background:#05070b!important;
  background-image:none!important;
}
#mainApp[style*="display: block"],
#mainApp[style*="display: grid"]{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
  border:0!important;
  box-shadow:none!important;
}
#mainApp>.workspace-top-shell,
#mainApp>.workspace-tool-grid,
#mainApp>.container{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
#mainApp:not(.workspace-tool-focused)>.workspace-tool-grid,
#mainApp:not(.workspace-tool-focused)>.workspace-tool-grid>.dashboard-tool-launcher{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
#mainApp.workspace-tool-focused{
  padding-bottom:0!important;
  margin-bottom:0!important;
}
#mainApp.workspace-tool-focused>.container,
#mainApp.workspace-tool-focused .tab-content.active{
  margin-bottom:0!important;
}
@media(min-width:901px){
  #mainApp[style*="display: block"],
  #mainApp[style*="display: grid"]{
    width:100%!important;
    max-width:none!important;
  }
}


/* Public landing copy of the outer-gap rule lives here as the last stylesheet
   authority so older landing/core declarations cannot restore desktop gutters. */
@media(min-width:851px){
  html:not(.workspace-route) body.public-landing-active:has(#loginScreen.front-home){
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    overflow-x:hidden!important;
  }
  html:not(.workspace-route) body.public-landing-active #loginScreen.front-home{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
}


/* ===== pdf-editor-live-transparent-signed-copy-v1 =====
   Final authority for live text editing: never paint a white rectangle behind
   typed replacement text. Signed-source working-copy warning stays visible. */
#mainApp #np-editor #np-inline,
body.op-light #mainApp #np-editor #np-inline,
html.op-theme-dark #mainApp #np-editor #np-inline{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-bottom:1px dashed #0891b2!important;
  border-radius:0!important;
  padding:0 1px!important;
  resize:none!important;
  overflow:visible!important;
  color:#111827!important;
  caret-color:#0284c7!important;
}
#mainApp #np-editor #np-inline:focus{
  outline:1px dashed rgba(2,132,199,.45)!important;
  outline-offset:2px!important;
}
#mainApp .pro-pdf-overlay.pro-text-overlay,
#mainApp .pro-pdf-overlay.pro-text-overlay[contenteditable="true"],
body.op-light #mainApp .pro-pdf-overlay.pro-text-overlay,
html.op-theme-dark #mainApp .pro-pdf-overlay.pro-text-overlay{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
#mainApp .np-signed-copy-warning{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid #dc2626;
  border-radius:9px;
  background:#fff7ed;
  color:#7f1d1d;
  font-size:11px;
  line-height:1.45;
  text-align:left;
}
#mainApp .np-signed-copy-warning[hidden]{display:none!important}
#mainApp .np-signed-copy-warning strong{flex:0 0 auto;color:#991b1b}
#mainApp .np-signed-copy-warning span{color:#7f1d1d}
html.op-theme-dark #mainApp .np-signed-copy-warning{background:#2b1010;border-color:#ef4444;color:#fecaca}
html.op-theme-dark #mainApp .np-signed-copy-warning strong,
html.op-theme-dark #mainApp .np-signed-copy-warning span{color:#fecaca}


/* ===== pdf-editor-no-whiteout-final-v2 =====
   Absolute final authority: editable text surfaces in both PDF editors must
   stay transparent. The PDF Editor Pro protected module no longer paints
   sampled/white rectangles into its live canvas either. */
#mainApp #np-editor #np-inline,
body.op-light #mainApp #np-editor #np-inline,
html.op-theme-dark #mainApp #np-editor #np-inline,
#mainApp .pro-pdf-overlay.pro-text-overlay,
#mainApp .pro-pdf-overlay.pro-text-overlay[contenteditable="true"],
body.op-light #mainApp .pro-pdf-overlay.pro-text-overlay,
html.op-theme-dark #mainApp .pro-pdf-overlay.pro-text-overlay,
#mainApp .pro-pdf-gemini-text,
#mainApp .pro-pdf-gemini-text[contenteditable="true"],
body.op-light #mainApp .pro-pdf-gemini-text,
body.op-light #mainApp .pro-pdf-gemini-text[contenteditable="true"],
html.op-theme-dark #mainApp .pro-pdf-gemini-text,
html.op-theme-dark #mainApp .pro-pdf-gemini-text[contenteditable="true"]{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
#mainApp .pro-pdf-gemini-text:focus,
body.op-light #mainApp .pro-pdf-gemini-text:focus,
html.op-theme-dark #mainApp .pro-pdf-gemini-text:focus{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}


/* ===== pdf-editor-audit-stability-v1 ===== */
#mainApp #np-editor .np-page-jump{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-size:11px;font-weight:700;white-space:nowrap}
#mainApp #np-editor .np-page-jump input{width:68px;min-height:30px;padding:4px 6px;text-align:center}
#mainApp #np-editor #np-thumbnails canvas[data-pending="true"]{opacity:.32}
#mainApp #np-editor #np-inline[data-preview-fallback="true"]{outline:1px dashed rgba(2,132,199,.55)!important;outline-offset:1px!important}
@media(max-width:740px){#mainApp #np-editor .np-page-jump{margin-left:0}#mainApp #np-editor .np-page-jump input{width:58px}}

/* ===== pdf-native-live-edit-strict-v1 =====
   Existing native PDF text is the only text-edit target in the normal editor.
   Keep the live textarea aligned to the source text bounds with no white layer. */
#mainApp #np-editor #np-inline,
body.op-light #mainApp #np-editor #np-inline,
html.op-theme-dark #mainApp #np-editor #np-inline{
  box-sizing:border-box!important;
  min-width:18px!important;
  min-height:16px!important;
  margin:0!important;
  white-space:pre-wrap!important;
  overflow:hidden!important;
  text-align:left!important;
  text-indent:0!important;
  font-variant-ligatures:normal!important;
}
#mainApp #np-editor #np-text{font-variant-ligatures:normal}

/* ===== pdf-native-text-hit-transparent-v1 =====
   Native PDF text hit-targets are interaction surfaces only. Theme-level
   button backgrounds must never cover the source PDF text. */
#mainApp #np-editor #np-hits button[data-block],
body.op-light #mainApp #np-editor #np-hits button[data-block],
html.op-theme-dark #mainApp #np-editor #np-hits button[data-block]{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  color:transparent!important;
}
#mainApp #np-editor #np-hits button[data-block]:hover,
#mainApp #np-editor #np-hits button[data-block].chosen,
body.op-light #mainApp #np-editor #np-hits button[data-block]:hover,
body.op-light #mainApp #np-editor #np-hits button[data-block].chosen,
html.op-theme-dark #mainApp #np-editor #np-hits button[data-block]:hover,
html.op-theme-dark #mainApp #np-editor #np-hits button[data-block].chosen{
  background:rgba(14,165,233,.045)!important;
  background-color:rgba(14,165,233,.045)!important;
  border:1px dashed rgba(2,132,199,.42)!important;
  box-shadow:none!important;
}

/* ===== pdf-universal-object-map-v1 ===== */
#mainApp #np-editor .np-smart-select-button{
  border-color:#0ea5e9!important;
  background:linear-gradient(135deg,#0f766e,#0284c7)!important;
  color:#fff!important;
  font-weight:800!important;
}
#mainApp #np-editor .np-object-panel{
  display:grid;
  gap:6px;
  margin-top:8px;
  padding:9px;
  border:1px solid #7dd3fc;
  border-radius:8px;
  background:#f0f9ff;
  color:#0f172a;
  font-size:10px;
  line-height:1.4;
}
#mainApp #np-editor .np-object-panel[hidden]{display:none!important}
#mainApp #np-editor .np-object-panel>[data-object-summary]{font-weight:700;color:#075985}
#mainApp #np-editor .np-object-panel>[data-object-details]{display:grid;gap:5px}
#mainApp #np-editor .np-object-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
#mainApp #np-editor .np-object-actions button{
  min-height:30px;
  padding:5px 8px;
  border:1px solid #0ea5e9;
  border-radius:6px;
  background:#e0f2fe;
  color:#0c4a6e;
  font-size:10px;
  font-weight:800;
}
#mainApp #np-editor #np-hits .np-server-object-hit{
  position:absolute;
  z-index:4;
  padding:0!important;
  min-width:8px;
  min-height:8px;
  pointer-events:auto;
  background:rgba(14,165,233,.04)!important;
  border:1px dashed #0284c7!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
#mainApp #np-editor #np-hits .np-server-object-hit.np-object-image{border-color:#f97316!important;background:rgba(249,115,22,.05)!important}
#mainApp #np-editor #np-hits .np-server-object-hit.np-object-form{border-color:#7c3aed!important;background:rgba(124,58,237,.05)!important}
#mainApp #np-editor #np-hits .np-server-object-hit.np-object-vector{border-color:#16a34a!important;background:rgba(22,163,74,.04)!important}
#mainApp #np-editor #np-hits .np-server-object-hit:hover,
#mainApp #np-editor #np-hits .np-server-object-hit.chosen{
  border-width:2px!important;
  background:rgba(14,165,233,.14)!important;
  outline:2px solid rgba(14,165,233,.14)!important;
  outline-offset:1px!important;
}
html.op-theme-dark #mainApp #np-editor .np-object-panel{background:#0c1b2a;color:#e2e8f0;border-color:#0ea5e9}
html.op-theme-dark #mainApp #np-editor .np-object-panel>[data-object-summary]{color:#7dd3fc}
html.op-theme-dark #mainApp #np-editor .np-object-actions button{background:#102b3d;color:#bae6fd;border-color:#38bdf8}

#mainApp #np-editor #np-hits button[data-block]{z-index:6}
#mainApp #np-editor #np-hits .np-placed-hit{z-index:7!important}


/* ===== pdf-native-image-transform-v1 ===== */
#mainApp #np-editor #np-hits .np-server-object-hit.np-object-image{
  cursor:move!important;
  touch-action:none!important;
}
#mainApp #np-editor #np-hits .np-server-resize-handle{
  position:absolute;
  right:-7px;
  bottom:-7px;
  width:14px;
  height:14px;
  border:2px solid #fff;
  border-radius:4px;
  background:#f97316;
  box-shadow:0 1px 5px rgba(15,23,42,.45);
  cursor:nwse-resize;
  pointer-events:auto;
  z-index:2;
}
#mainApp #np-editor .np-object-drag-hint{
  display:block;
  padding:5px 6px;
  border-radius:5px;
  background:#fff7ed;
  color:#9a3412;
  font-weight:700;
}
html.op-theme-dark #mainApp #np-editor .np-object-drag-hint{background:#431407;color:#fdba74}


/* ===== pdf-placed-free-transform-v1 =====
   Uploaded images/signatures and placed text keep an almost invisible frame.
   Tiny visual handles use larger invisible hit areas for mouse/touch accuracy. */
#mainApp #np-editor #np-hits .np-placed-hit,
#mainApp #np-editor #np-hits .np-placed-hit:hover{
  background:transparent!important;
  border:1px solid transparent!important;
  outline:none!important;
  box-shadow:none!important;
  cursor:move!important;
  touch-action:none!important;
}
#mainApp #np-editor #np-hits .np-placed-hit.chosen,
#mainApp #np-editor #np-hits .np-placed-hit.chosen:hover{
  background:transparent!important;
  border:1px dashed rgba(14,165,233,.38)!important;
  outline:none!important;
  box-shadow:none!important;
}
#mainApp #np-editor #np-hits .np-placed-hit .np-resize-handle{
  display:none;
  position:absolute;
  width:8px;
  height:8px;
  padding:0;
  border:1px solid rgba(2,132,199,.78);
  border-radius:2px;
  background:rgba(255,255,255,.94);
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
  box-sizing:border-box;
  pointer-events:auto;
  touch-action:none;
  z-index:3;
}
#mainApp #np-editor #np-hits .np-placed-hit.chosen .np-resize-handle{display:block}
#mainApp #np-editor #np-hits .np-resize-handle::after{content:"";position:absolute;inset:-7px}
#mainApp #np-editor #np-hits .np-resize-nw{left:-5px;top:-5px;right:auto;bottom:auto;cursor:nwse-resize}
#mainApp #np-editor #np-hits .np-resize-ne{right:-5px;top:-5px;left:auto;bottom:auto;cursor:nesw-resize}
#mainApp #np-editor #np-hits .np-resize-sw{left:-5px;bottom:-5px;right:auto;top:auto;cursor:nesw-resize}
#mainApp #np-editor #np-hits .np-resize-se{right:-5px;bottom:-5px;left:auto;top:auto;cursor:nwse-resize}
html.op-theme-dark #mainApp #np-editor #np-hits .np-placed-hit.chosen{border-color:rgba(125,211,252,.42)!important}
html.op-theme-dark #mainApp #np-editor #np-hits .np-placed-hit .np-resize-handle{background:rgba(15,23,42,.96);border-color:rgba(125,211,252,.82);box-shadow:0 0 0 1px rgba(15,23,42,.55)}


/* ===== signup-plan-light-contrast-v1 =====
   Keep duration controls readable in white mode. */
body.op-light #signUpScreen #signupPlanQtyLabel,
body.op-light #renewalScreen #renewalPlanQtyLabel,
body.op-light #trialUpgradeDialog #trialUpgradeQtyLabel{
  color:#172033!important;
  opacity:1!important;
  text-shadow:none!important;
}
body.op-light #signUpScreen #signupPlanDiscountNote,
body.op-light #signUpScreen #razorpayPlanSummary,
body.op-light #renewalScreen #renewalPlanSummary,
body.op-light #trialUpgradeDialog #trialUpgradePlanSummary{
  color:#334155!important;
  opacity:1!important;
  text-shadow:none!important;
}
body.op-light #signUpScreen :is(#signupPlanQtyDown,#signupPlanQtyUp),
body.op-light #renewalScreen :is(#renewalPlanQtyDown,#renewalPlanQtyUp),
body.op-light #trialUpgradeDialog :is(#trialUpgradeQtyDown,#trialUpgradeQtyUp){
  background:#e2e8f0!important;
  color:#0f172a!important;
  border:1px solid #94a3b8!important;
  box-shadow:none!important;
  opacity:1!important;
}
body.op-light #signUpScreen :is(#signupPlanQtyDown,#signupPlanQtyUp):hover,
body.op-light #renewalScreen :is(#renewalPlanQtyDown,#renewalPlanQtyUp):hover,
body.op-light #trialUpgradeDialog :is(#trialUpgradeQtyDown,#trialUpgradeQtyUp):hover{
  background:#cbd5e1!important;
  color:#0f172a!important;
}
body.op-light #signUpScreen :is(#signupPlanQtyDown,#signupPlanQtyUp):disabled,
body.op-light #renewalScreen :is(#renewalPlanQtyDown,#renewalPlanQtyUp):disabled,
body.op-light #trialUpgradeDialog :is(#trialUpgradeQtyDown,#trialUpgradeQtyUp):disabled{
  background:#f1f5f9!important;
  color:#64748b!important;
  border-color:#cbd5e1!important;
  opacity:.78!important;
}

/* Bilingual legal copy must never leak into the English UI. */
html[lang="en"] .agreement-copy-hi,
html:not([lang="hi"]) .agreement-copy-hi{display:none!important}
html[lang="hi"] .agreement-copy-en{display:none!important}


/* ===== secure-wallet-v3 · shared account wallet ===== */
#tab-udid-qr-generator .udid-wallet-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 14px;padding:12px 14px;border:1px solid #86efac;border-radius:12px;background:#f0fdf4;text-align:left}
#tab-udid-qr-generator .udid-wallet-entry-copy{display:grid;gap:3px;min-width:0}
#tab-udid-qr-generator .udid-wallet-entry-copy strong{color:#166534;font-size:13px}
#tab-udid-qr-generator .udid-wallet-entry-copy small{color:#3f6212;font-size:10px;line-height:1.45}
#tab-udid-qr-generator .wallet-balance-btn{display:inline-flex!important;align-items:center!important;gap:6px!important;min-width:auto!important;padding:8px 11px!important;font-weight:900!important;border:1px solid #22c55e66!important;background:#ecfdf5!important;color:#166534!important}
#tab-udid-qr-generator .wallet-balance-btn #walletBalanceText{font-variant-numeric:tabular-nums;white-space:nowrap}
body>.wallet-dialog{width:min(92vw,520px);max-width:520px;border:1px solid #334155;border-radius:16px;background:#0f172a;color:#e2e8f0;padding:0;box-shadow:0 24px 70px #02061799}
body>.wallet-dialog::backdrop{background:#020617b3;backdrop-filter:blur(2px)}
body>.wallet-dialog .wallet-dialog-close{position:absolute;top:10px;right:12px;border:0;background:transparent;color:#cbd5e1;font-size:28px;line-height:1;cursor:pointer;padding:4px 8px}
body>.wallet-dialog .wallet-dialog-body{padding:24px;text-align:left}
body>.wallet-dialog .wallet-dialog-body h3{margin:0 36px 7px 0;color:#dbeafe;font-size:20px}
body>.wallet-dialog .wallet-dialog-note{margin:0 0 15px;color:#94a3b8;font-size:12px;line-height:1.55}
body>.wallet-dialog .wallet-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 16px}
body>.wallet-dialog .wallet-summary-grid>div{padding:12px;border:1px solid #334155;border-radius:12px;background:#07111f}
body>.wallet-dialog .wallet-summary-grid span{display:block;color:#94a3b8;font-size:10px;margin-bottom:5px}
body>.wallet-dialog .wallet-summary-grid strong{display:block;color:#f8fafc;font-size:17px;font-variant-numeric:tabular-nums}
body>.wallet-dialog .wallet-amount-label{display:block;color:#cbd5e1;font-size:12px;font-weight:800;margin-bottom:7px}
body>.wallet-dialog .wallet-topup-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
body>.wallet-dialog .wallet-currency-prefix{display:grid;place-items:center;width:38px;height:42px;border:1px solid #334155;border-radius:10px;background:#07111f;color:#86efac;font-weight:900}
body>.wallet-dialog #walletTopupAmount{width:100%;height:42px;padding:8px 10px;border:1px solid #475569;border-radius:10px;background:#020617;color:#fff;font:inherit;font-weight:800}
body>.wallet-dialog #walletTopupBtn{width:auto;min-height:42px;margin:0;white-space:nowrap}
body>.wallet-dialog .wallet-amount-help{margin:8px 0 0;color:#94a3b8;font-size:10px;line-height:1.5}
body>.wallet-dialog #walletStatus{min-height:20px;margin-top:12px;color:#bfdbfe;font-size:12px;line-height:1.5}
body.op-light>.wallet-dialog{background:#fff;color:#172033;border-color:#cbd5e1}
body.op-light>.wallet-dialog .wallet-dialog-close{color:#334155}
body.op-light>.wallet-dialog .wallet-dialog-body h3{color:#17345f}
body.op-light>.wallet-dialog .wallet-dialog-note,body.op-light>.wallet-dialog .wallet-amount-help{color:#64748b}
body.op-light>.wallet-dialog .wallet-summary-grid>div,body.op-light>.wallet-dialog .wallet-currency-prefix{background:#f8fafc;border-color:#cbd5e1}
body.op-light>.wallet-dialog .wallet-summary-grid span{color:#64748b}
body.op-light>.wallet-dialog .wallet-summary-grid strong{color:#0f172a}
body.op-light>.wallet-dialog .wallet-amount-label{color:#334155}
body.op-light>.wallet-dialog #walletTopupAmount{background:#fff;color:#172033;border-color:#94a3b8}
html.op-theme-dark #tab-udid-qr-generator .udid-wallet-entry{background:#052e16;border-color:#166534}
html.op-theme-dark #tab-udid-qr-generator .udid-wallet-entry-copy strong{color:#bbf7d0}
html.op-theme-dark #tab-udid-qr-generator .udid-wallet-entry-copy small{color:#a7f3d0}
html.op-theme-dark #tab-udid-qr-generator .wallet-balance-btn{background:#052e16!important;color:#bbf7d0!important;border-color:#22c55e66!important}
@media(max-width:620px){
  #tab-udid-qr-generator .udid-wallet-entry{align-items:stretch;flex-direction:column}
  #tab-udid-qr-generator .wallet-balance-btn{justify-content:center!important;width:100%}
  body>.wallet-dialog .wallet-summary-grid{grid-template-columns:1fr}
  body>.wallet-dialog .wallet-topup-row{grid-template-columns:auto minmax(0,1fr)}
  body>.wallet-dialog #walletTopupBtn{grid-column:1/-1;width:100%}
}

/* ===== unified-centered-popup-system-v1 =====
   One visual language for landing, account, workspace and protected-tool popups.
   Full-screen image/result preview surfaces keep their dedicated presentation. */
:root{
  --skillo-popup-bg:linear-gradient(145deg,#ffffff 0%,#f7fbfd 68%,#fff8f1 100%);
  --skillo-popup-ink:#172033;
  --skillo-popup-heading:#17345f;
  --skillo-popup-muted:#5d6d82;
  --skillo-popup-line:#c8d9e3;
  --skillo-popup-field:#f8fbfd;
  --skillo-popup-field-line:#b9ceda;
  --skillo-popup-close-bg:#ffffff;
  --skillo-popup-close-ink:#475569;
  --skillo-popup-shadow:0 26px 80px rgba(15,23,42,.28);
  --skillo-popup-backdrop:rgba(20,33,61,.52);
}
html.op-theme-dark{
  --skillo-popup-bg:linear-gradient(145deg,#172033 0%,#0f172a 72%,#111827 100%);
  --skillo-popup-ink:#e5edf7;
  --skillo-popup-heading:#dbeafe;
  --skillo-popup-muted:#b6c4d7;
  --skillo-popup-line:#465a72;
  --skillo-popup-field:#091321;
  --skillo-popup-field-line:#52657d;
  --skillo-popup-close-bg:#17263a;
  --skillo-popup-close-ink:#f8fafc;
  --skillo-popup-shadow:0 28px 90px rgba(2,6,23,.72);
  --skillo-popup-backdrop:rgba(2,6,23,.72);
}

/* Every ordinary native dialog opens in the exact viewport center. */
dialog:not(#portal-image-view){
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  box-sizing:border-box!important;
}
dialog:not(#portal-image-view)::backdrop{
  background:var(--skillo-popup-backdrop)!important;
  -webkit-backdrop-filter:blur(7px) saturate(.92);
  backdrop-filter:blur(7px) saturate(.92);
}

/* Standard popup card surface. Large review/crop dialogs keep their dedicated shell. */
dialog:not(#portal-image-view):not(.portal-result-preview-dialog):not(.bulk-auto-manual-dialog):not(.bulk-auto-add-more-dialog){
  max-height:min(88dvh,900px)!important;
  overflow:auto!important;
  border:1px solid var(--skillo-popup-line)!important;
  border-radius:20px!important;
  background:var(--skillo-popup-bg)!important;
  color:var(--skillo-popup-ink)!important;
  box-shadow:var(--skillo-popup-shadow)!important;
  scrollbar-gutter:stable;
  animation:skilloPopupIn .18s ease-out;
}
dialog:not(#portal-image-view):not(.portal-result-preview-dialog) :is(h1,h2,h3,h4){
  color:var(--skillo-popup-heading)!important;
}
dialog:not(#portal-image-view):not(.portal-result-preview-dialog) :is(p:not([role="status"]):not([role="alert"]),label,small){
  color:var(--skillo-popup-muted)!important;
}
dialog:not(#portal-image-view):not(.portal-result-preview-dialog) :is(
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
  input[type="url"],input[type="number"],input[type="date"],input[type="file"],select,textarea
){
  box-sizing:border-box!important;
  border-color:var(--skillo-popup-field-line)!important;
  background:var(--skillo-popup-field)!important;
  color:var(--skillo-popup-ink)!important;
}
dialog:not(#portal-image-view):not(.portal-result-preview-dialog) :is(
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
  input[type="url"],input[type="number"],input[type="date"],select,textarea
):focus{
  outline:0!important;
  border-color:#45aab7!important;
  box-shadow:0 0 0 3px rgba(14,165,168,.14)!important;
}

/* Close controls share the landing-page button treatment. */
dialog:not(#portal-image-view) :is(
  .landing-feedback-close,.utility-close-btn,.mission-x,.wallet-dialog-close,
  #purchaseHistoryClose,#accountDeleteRequestClose,#bulkAutoManualCropClose,#bulkAutoAddMoreClose
){
  border:1px solid var(--skillo-popup-line)!important;
  border-radius:10px!important;
  background:var(--skillo-popup-close-bg)!important;
  color:var(--skillo-popup-close-ink)!important;
  box-shadow:0 4px 12px rgba(15,23,42,.10)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
dialog:not(#portal-image-view) :is(
  .landing-feedback-close,.utility-close-btn,.mission-x,.wallet-dialog-close,
  #purchaseHistoryClose,#accountDeleteRequestClose,#bulkAutoManualCropClose,#bulkAutoAddMoreClose
):hover{
  transform:translateY(-1px);
  border-color:#45aab7!important;
}

/* Bulk review/crop dialogs stay wide but use the same card system. */
.bulk-auto-manual-dialog,.bulk-auto-add-more-dialog{
  max-height:92dvh!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.bulk-auto-manual-card,.bulk-auto-add-more-card{
  border:1px solid var(--skillo-popup-line)!important;
  border-radius:20px!important;
  background:var(--skillo-popup-bg)!important;
  color:var(--skillo-popup-ink)!important;
  box-shadow:var(--skillo-popup-shadow)!important;
  overflow:auto;
  max-height:92dvh;
}

/* Preview is a large popup, but remains centered on desktop. */
.portal-result-preview-dialog{
  position:fixed!important;
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;margin:0!important;
  box-shadow:var(--skillo-popup-shadow)!important;
}
.portal-result-preview-dialog::backdrop{
  background:var(--skillo-popup-backdrop)!important;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}

/* Non-dialog overlays use the same centered shell. */
#infoModal,#cropModal{
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(14px,3vw,28px)!important;
  background:var(--skillo-popup-backdrop)!important;
  -webkit-backdrop-filter:blur(7px) saturate(.92);
  backdrop-filter:blur(7px) saturate(.92);
}
#infoModal .info-modal-card,.skillo-crop-modal-card{
  box-sizing:border-box!important;
  border:1px solid var(--skillo-popup-line)!important;
  border-radius:20px!important;
  background:var(--skillo-popup-bg)!important;
  color:var(--skillo-popup-ink)!important;
  box-shadow:var(--skillo-popup-shadow)!important;
}

#infoModal .info-modal-card{
  width:min(680px,calc(100vw - 28px))!important;
  max-height:86dvh!important;
}
.skillo-crop-modal-card{
  width:min(1060px,calc(100vw - 28px));
  max-height:92dvh;
  overflow:auto;
  padding:18px;
}
.skillo-crop-modal-card #cropModalTitle{
  margin:0 0 12px!important;
  color:var(--skillo-popup-heading)!important;
  font-size:15px;
  text-align:center;
}
.skillo-crop-modal-card .crop-wrapper{
  max-width:100%!important;
  margin:0 auto;
  border:1px solid var(--skillo-popup-line);
  border-radius:14px;
  overflow:hidden;
  background:#07111f;
}
.skillo-crop-modal-card>.btn-group{margin:14px 0 0!important}

/* Light landing-style treatment for utility popup internals. */
.quick-utility-dialog .utility-kicker,.quick-utility-dialog .bookmark-editor-row span{color:#0b7f8c!important}
.quick-utility-dialog .calculator-grid button{
  border-color:var(--skillo-popup-field-line)!important;
  background:var(--skillo-popup-close-bg)!important;
  color:var(--skillo-popup-heading)!important;
  box-shadow:0 3px 10px rgba(15,23,42,.06);
}
.quick-utility-dialog .calculator-grid button.operator{
  background:#eef4ff!important;border-color:#bfd0ed!important;color:#294f91!important;
}
.quick-utility-dialog .calculator-grid button.equals{
  background:linear-gradient(105deg,#0b9fa8,#377be8)!important;border-color:transparent!important;color:#fff!important;
}
.quick-utility-dialog .cash-tally-row strong{color:var(--skillo-popup-heading)!important}
.quick-utility-dialog .cash-tally-row output{color:#0f766e!important}
.quick-utility-dialog .cash-tally-total{color:var(--skillo-popup-muted)!important;border-color:var(--skillo-popup-line)!important}
.quick-utility-dialog .cash-tally-total strong{color:var(--skillo-popup-heading)!important}
.quick-utility-dialog .utility-secondary-btn{
  border-color:var(--skillo-popup-field-line)!important;background:var(--skillo-popup-close-bg)!important;color:var(--skillo-popup-heading)!important;
}
.quick-utility-dialog .utility-primary-btn{
  background:linear-gradient(105deg,#0b9fa8,#377be8)!important;border-color:transparent!important;color:#fff!important;
}
html.op-theme-dark .quick-utility-dialog .calculator-grid button.operator{background:#1b3151!important;border-color:#4f6890!important;color:#dbeafe!important}

/* Keep semantic accent colors while sharing the common card geometry. */
.landing-whatsapp-dialog h3{color:#087a3d!important}
.landing-whatsapp-dialog .landing-audience-kicker{color:#0b9f50!important}
#accountDeleteRequestDialog h3{color:#b42318!important}
html.op-theme-dark #accountDeleteRequestDialog h3{color:#fecaca!important}
.refund-request-dialog h3{color:#9a6700!important}
html.op-theme-dark .refund-request-dialog h3{color:#fde68a!important}

/* Runtime OTP dialog is created by JS, but follows the same exact theme. */
.skillo-otp-dialog{
  width:min(430px,calc(100vw - 28px))!important;
  padding:0!important;
}
.skillo-otp-dialog form{padding:24px!important;gap:12px!important}
.skillo-otp-dialog h3{font-size:20px!important}
.skillo-otp-dialog input{font-size:20px!important;letter-spacing:6px!important;text-align:center!important}
.skillo-otp-dialog button{
  min-height:40px;
  padding:9px 15px!important;
  border-radius:10px!important;
}
.skillo-otp-dialog button[type="button"]{
  border:1px solid var(--skillo-popup-line)!important;
  background:var(--skillo-popup-close-bg)!important;
  color:var(--skillo-popup-close-ink)!important;
}
.skillo-otp-dialog button[type="submit"]{
  border:0!important;
  background:linear-gradient(105deg,#0b9fa8,#377be8)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(37,124,226,.20)!important;
}

/* The existing mission/feedback panels now inherit the same outer card surface. */
.mission-shell,.mission-head,.mission-body,.landing-feedback-dialog .landing-contact-card{
  background:transparent!important;
}
html.op-theme-dark .mission-dialog :is(.mission-tagline,.mission-letter p,.mission-letter li),
html.op-theme-dark .landing-feedback-dialog :is(.feedback-privacy-note,.utility-helper){
  color:var(--skillo-popup-muted)!important;
}

@keyframes skilloPopupIn{
  from{opacity:0;transform:translate(-50%,-48%) scale(.985)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  dialog:not(#portal-image-view){animation:none!important}
}
@media(max-width:720px){
  dialog:not(#portal-image-view):not(.portal-result-preview-dialog){
    width:min(94vw,680px);
    max-height:90dvh!important;
    border-radius:16px!important;
  }
  .portal-result-preview-dialog{
    top:0!important;left:0!important;right:0!important;bottom:0!important;
    transform:none!important;margin:0!important;
  }
  #infoModal,#cropModal{padding:10px!important}
  .skillo-crop-modal-card{width:100%;max-height:94dvh;padding:12px;border-radius:16px!important}
}


/* 2026-10-04 crop-review and Five-photo layout repair */
#ppFiveA4Panel .pp-five-slots{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
#ppFiveA4Panel .pp-five-slot{
  min-width:180px!important;
  padding:12px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  overflow:visible!important;
}
#ppFiveA4Panel .pp-five-paste{
  min-height:88px!important;
  padding:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1.35!important;
  overflow-wrap:break-word!important;
}
#ppFiveA4Panel .pp-five-actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
#ppFiveA4Panel .pp-five-actions .action-btn{min-width:112px!important;white-space:normal!important}
#ppFiveA4Panel .pp-five-qty-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 72px!important;
  align-items:center!important;
  gap:8px!important;
  margin:2px 0 0!important;
  font-size:11px!important;
  font-weight:700!important;
  color:var(--text-muted)!important;
}
#ppFiveA4Panel .pp-five-qty-input{
  width:72px!important;
  min-width:72px!important;
  min-height:34px!important;
  padding:6px 8px!important;
  margin:0!important;
  text-align:center!important;
}
#ppFiveA4Panel .pp-five-sheet-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:12px!important;
}
#ppFiveA4Panel .pp-five-sheet-actions>.action-btn{width:100%!important;min-width:0!important;margin:0!important}

#tab-bulk-auto-id .bulk-auto-preview-scroll{
  height:auto!important;
  min-height:0!important;
  max-height:56dvh!important;
  margin-bottom:0!important;
}
#tab-bulk-auto-id .bulk-auto-preview-actions{
  margin-top:6px!important;
}
@media (min-width:1180px){
  #tab-premium-passport-enhancer>#ppFiveA4Panel .pp-five-slots{
    grid-template-columns:repeat(2,minmax(190px,1fr))!important;
  }
  #tab-bulk-auto-id>.bulk-auto-launch-card{
    grid-column:1/5!important;
    grid-row:2/span 10!important;
    margin-top:0!important;
  }
  #tab-bulk-auto-id>#bulkAutoStatus{
    grid-column:5/9!important;
    grid-row:2!important;
    align-self:start!important;
    margin:0!important;
  }
  #tab-bulk-auto-id>#bulkAutoReviewPanel{
    grid-column:5/9!important;
    grid-row:2/span 10!important;
    align-self:start!important;
    margin:36px 0 0!important;
    max-height:calc(100dvh - 174px)!important;
  }
  #tab-bulk-auto-id>.bulk-auto-preview-panel{
    grid-column:9/-1!important;
    grid-row:2/span 10!important;
    align-self:start!important;
    margin:0!important;
    padding-top:10px!important;
  }
  #tab-bulk-auto-id>.bulk-auto-preview-panel .bulk-auto-preview-scroll{
    max-height:calc(100dvh - 330px)!important;
  }
}
@media (max-width:700px){
  #ppFiveA4Panel .pp-five-slots{grid-template-columns:1fr!important}
  #ppFiveA4Panel .pp-five-sheet-actions{grid-template-columns:1fr!important}
}


/* ===== referral-guide-centered-v1 ===== */
.referral-activation-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.referral-guide-dialog{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  width:min(92vw,620px)!important;
  max-height:min(84dvh,720px)!important;
  overflow:auto!important;
  padding:22px!important;
  border:1px solid var(--skillo-popup-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  color:#172033!important;
  box-shadow:var(--skillo-popup-shadow)!important;
}
.referral-guide-dialog::backdrop{
  background:rgba(2,6,23,.55)!important;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.referral-guide-dialog h3{margin:14px 38px 8px 0!important;color:#17345f!important;font-size:21px!important}
.referral-guide-dialog p{margin:0 0 12px!important;color:#475569!important;line-height:1.6!important}
.referral-guide-dialog ol{margin:0;padding-left:22px;color:#334155;display:grid;gap:9px;line-height:1.55}
.referral-guide-close{
  position:absolute;top:10px;right:12px;width:38px;height:38px;padding:0;
  display:grid;place-items:center;border:1px solid #cbd5e1;border-radius:10px;
  background:#fff;color:#334155;font-size:27px;line-height:1;cursor:pointer;
}
.referral-guide-language{display:flex;gap:7px;flex-wrap:wrap;padding-right:44px}
.referral-guide-language button{
  min-height:34px;padding:7px 11px;border:1px solid #cbd5e1;border-radius:999px;
  background:#f8fafc;color:#334155;font-weight:800;cursor:pointer;
}
.referral-guide-language button[aria-pressed="true"]{background:#e0f2fe;border-color:#38bdf8;color:#075985}
@media(max-width:520px){
  .referral-activation-actions{display:grid;grid-template-columns:1fr}
  .referral-activation-actions .action-btn{width:100%!important;margin:0!important}
  .referral-guide-dialog{width:calc(100vw - 18px)!important;padding:18px!important}
}

/* Public free-tools isolation: no authenticated header/Workspace strip. */
/* The SEO introduction and public link navigation are intentionally retained.
   Public free pages must never inherit the signed-in header or sticky workspace
   bar. Scope these overrides to public mode; /app and its controls are unchanged. */
#mainApp.public-free-mode > .workspace-top-shell {
  position:static!important;top:auto!important;transform:none!important;
  display:block!important;min-height:0!important;margin:0 0 4px!important;
  padding:0!important;gap:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;
}
#mainApp.public-free-mode > .workspace-top-shell > .workspace-header-row,
#mainApp.public-free-mode > .workspace-top-shell > .portal-tool-sidebar,
#mainApp.public-free-mode > .workspace-top-shell > #globalNoticeBanner {
  display:none!important;
}
#mainApp.public-free-mode > .workspace-top-shell > #publicFreeToolsNav {
  display:flex!important;position:static!important;
}

/* Public landing trust and tool highlights. No social-proof counters. */
/* Same compact landing-only position as the former activity strip; existing
   counts continue in the metrics backend/Admin, but are not promoted publicly. */
body.public-landing-active #loginScreen.front-home > #landingMetrics.landing-trust-section {
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  min-height:72px!important;
  padding:10px 14px!important;
  background:linear-gradient(125deg,#fff 0%,#f5fafc 100%)!important;
  border:1px solid #d6e4ec!important;
  border-radius:12px!important;
  color:#19354c!important;
  text-align:left!important;
}
#landingMetrics.landing-trust-section .landing-trust-intro {
  flex:0 1 220px;
  min-width:165px;
  display:grid;
  gap:4px;
  text-align:left;
}
#landingMetrics.landing-trust-section .landing-trust-kicker {
  color:#267b92!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.8px!important;
  line-height:1.3;
}
#landingMetrics.landing-trust-section .landing-metrics-heading {
  color:#173b55!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.3!important;
}
#landingMetrics.landing-trust-section .landing-trust-grid {
  flex:1 1 740px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
  min-width:0;
}
#landingMetrics.landing-trust-section .landing-trust-item {
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid #e2eaf1;
  border-radius:10px;
  background:#fff;
}
#landingMetrics.landing-trust-section .landing-trust-icon {
  flex:0 0 27px;
  font-size:20px!important;
  line-height:1;
  text-align:center;
}
#landingMetrics.landing-trust-section .landing-trust-item > div {
  min-width:0;display:grid;gap:2px;
}
#landingMetrics.landing-trust-section .landing-trust-item strong {
  color:#163c52!important;
  font-size:11px!important;
  line-height:1.25;
}
#landingMetrics.landing-trust-section .landing-trust-item small {
  color:#50687a!important;
  font-size:9.5px!important;
  line-height:1.35;
}
@media(max-width:1100px){
  #landingMetrics.landing-trust-section .landing-trust-intro{flex-basis:100%}
  #landingMetrics.landing-trust-section .landing-trust-grid{flex-basis:100%}
}
@media(max-width:740px){
  #landingMetrics.landing-trust-section .landing-trust-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:420px){
  body.public-landing-active #loginScreen.front-home > #landingMetrics.landing-trust-section{
    padding:9px!important;gap:9px!important;
  }
  #landingMetrics.landing-trust-section .landing-trust-item{
    padding:8px 6px;gap:5px;
  }
  #landingMetrics.landing-trust-section .landing-trust-icon{
    flex-basis:21px;font-size:16px!important;
  }
  #landingMetrics.landing-trust-section .landing-trust-item strong{font-size:10px!important}
  #landingMetrics.landing-trust-section .landing-trust-item small{font-size:8.5px!important}
}

/* Public landing bottom order: guides, feature highlights, accessible footer.
   Footer actions are in normal document flow: never cover copyright or links. */
body.public-landing-active #loginScreen.front-home > #landingArticles {
  grid-column:1 / -1!important;
  grid-row:3!important;
}
body.public-landing-active #loginScreen.front-home > #landingMetrics.landing-trust-section {
  grid-column:1 / -1!important;
  grid-row:4!important;
}
body.public-landing-active #loginScreen.front-home > .op-footer {
  display:grid!important;
  grid-column:1 / -1!important;
  grid-row:5!important;
  grid-template-columns:minmax(0,1fr);
  gap:7px!important;
  padding:9px 14px!important;
  min-height:0!important;
  margin-top:6px!important;
  border-radius:12px 12px 0 0!important;
  overflow:visible!important;
}
body.public-landing-active #loginScreen.front-home > .op-footer > .landing-float-actions {
  position:static!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  justify-content:flex-end!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  min-height:38px;
  padding:0!important;
  margin:0!important;
  z-index:auto!important;
  isolation:auto!important;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-float-actions > :is(a,button) {
  position:relative!important;
  margin:0!important;
  max-width:100%;
  flex:0 0 auto;
}
body.public-landing-active #loginScreen.front-home > .op-footer > .landing-footer-info-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px 14px;
  min-width:0;
  border-top:1px solid #e2eaf1;
  padding-top:7px;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row #landingPolicyStrip {
  display:flex!important;
  position:static!important;
  flex-wrap:wrap!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  background:transparent!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .landing-policy-links {
  display:flex!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:1px 0!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .landing-policy-links a {
  padding:2px 6px!important;
  color:#2563b3!important;
  font-size:10px!important;
  line-height:1.5!important;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .op-footer-bottom {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  white-space:nowrap;
  gap:5px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  text-align:right!important;
  font-size:10px!important;
  color:#66798d!important;
}
@media(max-width:1100px){
  body.public-landing-active #loginScreen.front-home > .op-footer > .landing-footer-info-row{
    grid-template-columns:minmax(0,1fr);
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .op-footer-bottom{
    justify-content:flex-end!important;
  }
}
@media(max-width:620px){
  body.public-landing-active #loginScreen.front-home > .op-footer{
    padding:10px!important;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer > .landing-float-actions{
    justify-content:center!important;
    gap:6px!important;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-float-actions > :is(a,button){
    flex:1 1 auto;
    max-width:100%;
    min-height:35px;
    text-align:center;
    font-size:10px!important;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .landing-policy-links{
    justify-content:center!important;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .op-footer-bottom{
    justify-content:center!important;
    flex-wrap:wrap!important;
    white-space:normal;
    font-size:9px!important;
  }
}

/* Full-viewport tool workspace: one shared close bar, no duplicated editor
   markup or remounting. Dialogs remain on the native top layer. */
body.skillo-tool-fullscreen-open{overflow:hidden!important}
#mainApp .tab-content.active.skillo-tool-fullscreen{
  position:fixed!important;inset:0!important;z-index:960!important;
  box-sizing:border-box!important;width:100vw!important;height:100dvh!important;
  max-width:none!important;max-height:100dvh!important;min-height:100dvh!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  margin:0!important;padding:70px 18px 24px!important;border-radius:0!important;
  transform:none!important;animation:none!important;transition:none!important;
}
#skilloToolFullscreenBar{
  position:fixed;inset:0 0 auto;z-index:970;
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:58px;padding:9px 18px;background:linear-gradient(110deg,#0d3d52,#126c8a 52%,#2853ba);
  color:#fff;box-shadow:0 2px 10px #02061724;
}
#skilloToolFullscreenBar[hidden]{display:none!important}
#skilloToolFullscreenTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(15px,1.5vw,21px);line-height:1.25;color:#fff}
#skilloToolFullscreenClose{
  flex:0 0 auto;min-width:92px;min-height:40px;padding:8px 13px;
  border:1px solid #ffffff88;border-radius:12px;background:#ffffff29;color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;
}
#skilloToolFullscreenClose:hover{background:#ffffff40}
#skilloToolFullscreenClose:focus-visible{outline:3px solid #fcd34d;outline-offset:2px}
@media(max-width:600px){
  #mainApp .tab-content.active.skillo-tool-fullscreen{padding:64px 9px 16px!important}
  #skilloToolFullscreenBar{min-height:54px;padding:7px 10px}
  #skilloToolFullscreenClose{min-width:76px;min-height:38px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){
  #mainApp .tab-content.active.skillo-tool-fullscreen,#skilloToolFullscreenBar{animation:none!important;transition:none!important}
}

/* The workspace frame is screen-only. Retain every existing Resume/Farmer ID
   @media print output rule without clipping it to a 100dvh editor viewport. */
@media print{
  body.skillo-tool-fullscreen-open{overflow:visible!important}
  #skilloToolFullscreenBar{display:none!important}
  #mainApp .tab-content.active.skillo-tool-fullscreen{
    position:static!important;inset:auto!important;z-index:auto!important;
    width:100%!important;height:auto!important;max-width:none!important;
    max-height:none!important;min-height:0!important;overflow:visible!important;
    margin:0!important;padding:0!important;border:0!important;
    box-shadow:none!important;transform:none!important
  }
}

/* Footer-only Portal Activity: three verified counters, no overlap with policies. */
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-activity{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:470px;min-width:0;width:100%;margin:0 auto;
  border:1px solid #cfdbe8;border-radius:7px;overflow:hidden;
  background:#f8fbff;text-align:center;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-stat{
  display:flex;min-width:0;align-items:center;justify-content:center;
  flex-direction:column;gap:2px;padding:7px 8px;
  border-right:1px solid #d7e2ed;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-stat:last-of-type{
  border-right:0;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-stat span{
  color:#38546a;font:700 9px/1.3 Arial,sans-serif;
  text-transform:uppercase;white-space:nowrap;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-stat strong{
  color:#144c80;font:800 14px/1.2 Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-activity-status{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media(min-width:1450px){
  body.public-landing-active #loginScreen.front-home > .op-footer > .landing-footer-info-row{
    grid-template-columns:minmax(0,1fr) minmax(330px,470px) auto;gap:8px 12px;
  }
}
@media(min-width:1101px) and (max-width:1449px){
  body.public-landing-active #loginScreen.front-home > .op-footer > .landing-footer-info-row{
    grid-template-columns:minmax(0,1fr) minmax(330px,470px);
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row #landingPolicyStrip{
    grid-column:1;grid-row:1 / span 2;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-activity{
    grid-column:2;grid-row:1;
  }
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-info-row .op-footer-bottom{
    grid-column:2;grid-row:2;
  }
}
@media(max-width:1100px){
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-activity{
    width:100%;max-width:470px;
  }
}
@media(max-width:400px){
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-stat{padding:7px 3px}
  body.public-landing-active #loginScreen.front-home > .op-footer .landing-footer-stat span{font-size:8px}
}


/* Public free-tool pages: one centered document layout, never a floating
   signed-in dashboard or a corner-mounted full-screen editor. /app untouched. */
#mainApp.public-free-mode{
  display:block!important;position:relative!important;inset:auto!important;
  width:min(1120px,calc(100% - 32px))!important;max-width:1120px!important;
  min-width:0!important;min-height:0!important;height:auto!important;
  margin:20px auto 34px!important;padding:20px 24px 26px!important;
  box-sizing:border-box!important;overflow:visible!important;
  border:1px solid #dce5ef!important;border-radius:18px!important;
  background:#f8fbff!important;color:#1e293b!important;
  box-shadow:0 10px 28px rgba(15,23,42,.08)!important;
  transform:none!important;isolation:isolate!important;
}
#mainApp.public-free-mode>.workspace-top-shell{
  display:block!important;position:static!important;top:auto!important;
  width:100%!important;min-height:0!important;height:auto!important;
  max-width:none!important;margin:0 0 12px!important;padding:0!important;
  border:none!important;background:transparent!important;box-shadow:none!important;
}
#mainApp .public-free-toolbar{display:none!important}
#mainApp.public-free-mode .public-free-toolbar:not([hidden]){
  display:flex!important;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding:12px 15px;margin:0 0 10px;
  border:1px solid #cee0ee;border-radius:13px;background:#fff;
}
#mainApp.public-free-mode .public-free-toolbar .public-free-home-link{
  display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;
  min-height:40px;padding:8px 15px;box-sizing:border-box;
  border:1px solid #bfcee1;border-radius:10px;background:#edf6fc;
  color:#174166!important;-webkit-text-fill-color:#174166!important;
  font:750 13px/1.2 system-ui,sans-serif;text-decoration:none!important;
}
#mainApp.public-free-mode .public-free-toolbar .public-free-home-link:hover,
#mainApp.public-free-mode .public-free-toolbar .public-free-home-link:focus-visible{
  background:#dbeafe;border-color:#60a5fa;outline:2px solid #bfdbfe;outline-offset:1px;
}
#mainApp.public-free-mode .public-free-toolbar-heading{
  flex:1 1 220px;min-width:0;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:2px;
}
#mainApp.public-free-mode .public-free-toolbar-heading>span{
  color:#567088!important;font:650 11px/1.3 system-ui,sans-serif;
}
#mainApp.public-free-mode .public-free-toolbar-heading>strong{
  color:#12365a!important;-webkit-text-fill-color:#12365a!important;
  font:800 clamp(17px,1.6vw,21px)/1.25 system-ui,sans-serif;
  overflow-wrap:anywhere;
}
#mainApp.public-free-mode .public-free-tool-hint{
  flex:0 0 auto;font:700 11px/1.3 system-ui,sans-serif;color:#64748b!important;
}
#mainApp.public-free-mode #publicFreeToolsNav{
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
  align-items:center!important;gap:8px!important;width:100%!important;
  max-width:none!important;min-height:0!important;padding:4px 0 10px!important;
  margin:0 0 10px!important;overflow:visible!important;
  white-space:normal!important;
}
#mainApp.public-free-mode #publicFreeToolsNav>a{
  display:inline-flex!important;justify-content:center;align-items:center;
  flex:0 0 auto;min-height:37px;padding:8px 12px!important;
  font-size:12px!important;text-align:center;white-space:normal!important;
}
#mainApp.public-free-mode>.container,
#mainApp.public-free-mode .tab-content.active{
  box-sizing:border-box!important;width:100%!important;
  max-width:100%!important;min-width:0!important;margin-left:0!important;
  margin-right:0!important;
}
#mainApp.public-free-mode .tab-content.active.skillo-tool-fullscreen{
  position:relative!important;inset:auto!important;z-index:auto!important;
  min-height:0!important;height:auto!important;max-height:none!important;
  overflow:visible!important;padding:12px!important;border-radius:14px!important;
}
#mainApp.public-free-mode.workspace-tool-focused>.workspace-tool-grid{display:none!important}
#mainApp.public-free-mode .workspace-tool-grid .dashboard-card:not([data-tool-tier="free"]){
  display:none!important;
}
#mainApp.public-free-mode:not(.workspace-tool-focused)>.workspace-tool-grid{
  width:100%!important;position:relative!important;inset:auto!important;
  margin:0!important;padding:0!important;border:none!important;
  box-shadow:none!important;
}
#mainApp.public-free-mode:not(.workspace-tool-focused) .dashboard-tool-launcher{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  align-items:stretch!important;gap:12px!important;width:100%!important;
  padding:12px!important;margin:0!important;
  border:1px solid #dbe5f0!important;border-radius:14px!important;
  background:#f3f7fc!important;box-shadow:none!important;
}
#mainApp.public-free-mode .dashboard-group-title{
  grid-column:1/-1!important;color:#17365e!important;
  border-bottom:1px solid #d3deeb!important;
}
#mainApp.public-free-mode .dashboard-card[data-tool-tier="free"]{
  min-height:76px!important;background:#fff!important;color:#183653!important;
  border:1px solid #d9e3ed!important;border-radius:11px!important;
  box-shadow:0 2px 8px rgba(15,23,42,.04)!important;
}
/* Native-browser BFCache may restore an old overlay class. Never display it
   on unauthenticated public free-tool pages. */
body:has(#mainApp.public-free-mode) #skilloToolFullscreenBar{display:none!important}
body:has(#mainApp.public-free-mode){overflow-x:hidden!important;overflow-y:auto!important}
@media(max-width:680px){
  #mainApp.public-free-mode{
    width:calc(100% - 16px)!important;margin:8px auto 20px!important;
    padding:12px!important;border-radius:13px!important;
  }
  #mainApp.public-free-mode .public-free-toolbar:not([hidden]){
    padding:11px;gap:9px;justify-content:flex-start;
  }
  #mainApp.public-free-mode .public-free-toolbar-heading{
    flex:1 1 calc(100% - 150px);align-items:flex-start;text-align:left;
  }
  #mainApp.public-free-mode .public-free-tool-hint{display:none!important}
  #mainApp.public-free-mode #publicFreeToolsNav{justify-content:flex-start!important;gap:7px!important}
  #mainApp.public-free-mode #publicFreeToolsNav>a{flex:1 1 calc(50% - 10px);font-size:11px!important}
  #mainApp.public-free-mode:not(.workspace-tool-focused) .dashboard-tool-launcher{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))!important;
    padding:8px!important;gap:9px!important;
  }
}
@media print{
  #mainApp.public-free-mode{box-shadow:none!important;border:0!important}
  #mainApp.public-free-mode .public-free-toolbar{display:none!important}
}


/* Authenticated tool header: keep the existing fullscreen canvas/engine,
   but align its return action with the content instead of the screen corner. */
#skilloToolFullscreenBar:not([hidden]){
  padding-left:max(16px,calc((100vw - 1340px)/2))!important;
  padding-right:max(16px,calc((100vw - 1340px)/2))!important;
}
#skilloToolFullscreenClose{
  min-width:128px!important;border-radius:10px!important;
  background:rgba(255,255,255,.18)!important;
}
#skilloToolFullscreenClose:hover,
#skilloToolFullscreenClose:focus-visible{background:rgba(255,255,255,.28)!important}
@media(max-width:600px){
  #skilloToolFullscreenBar:not([hidden]){padding-left:12px!important;padding-right:12px!important}
  #skilloToolFullscreenClose{min-width:104px!important;font-size:12px!important}
}

/* Compact operation actions: lightweight elevated surfaces, no animated movement. */
#mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6) :is(.btn-group,.pvc-side-download-actions,.basic-pvc-side-download-actions,.bulk-auto-preview-actions){
  align-content:start!important;align-self:start!important;justify-content:center!important;
  gap:7px!important;margin-top:6px!important;margin-bottom:0!important;padding:4px!important;
}
#mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6) :is(.action-btn,.login-btn):not(:disabled){
  border-radius:10px!important;border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 3px 9px rgba(30,58,99,.14)!important;
  transition:background-color .12s ease,box-shadow .12s ease!important;
  animation:none!important;transform:none!important;
}
#mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6) :is(.btn-add,.btn-download):not(:disabled){
  background:linear-gradient(110deg,#176b93,#4455bd)!important;color:#fff!important;
}
#mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6) :is(.btn-reset):not(:disabled){
  background:#fff5f0!important;color:#91432d!important;border-color:#e9c9ba!important;
}
#mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6) :is(.action-btn,.login-btn):hover:not(:disabled){
  box-shadow:0 5px 12px rgba(30,58,99,.19)!important;transform:none!important;
}
@media(prefers-reduced-motion:reduce){
  #mainApp.workspace-tool-focused :is(#tab-cards,#tab-bulk-auto-id,#tab-passport,#tab-name-passport,#tab-4x6) :is(.action-btn,.login-btn){transition:none!important}
}
@media(min-width:1180px){
  #tab-cards>#basicCardPreview{align-self:start!important}
  #tab-cards>#basicPvcSideDownloads,#tab-cards>#premiumPvcSideDownloads,#tab-cards>.basic-card-primary-actions{align-self:start!important}
  #tab-bulk-auto-id>.bulk-auto-preview-panel .bulk-auto-preview-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #tab-bulk-auto-id>.bulk-auto-preview-panel .bulk-auto-preview-actions>.action-btn{min-width:0!important;width:100%!important;margin:0!important}
}

/* A4 Card Editor only: Free Crop selection. Does not style the Auto/Bulk
   recognition/manual-crop controls or alter PVC output geometry. */
#premiumCardEditor #premiumCardEditorFreeCropBtn[aria-pressed="true"]{background:#f59e0b;color:#111827;border:2px solid #fef3c7;box-shadow:0 0 0 2px #0891b2}
#premiumCardEditor #premiumCardEditorCropApplyBtn{background:#047857;color:#fff;border:1px solid #6ee7b7}
#premiumCardEditor #premiumCardEditorCropCancelBtn{background:#334155;color:#fff;border:1px solid #cbd5e1}
#premiumCardEditor [hidden]{display:none!important}
#premiumCardEditor .premium-editor-crop-overlay{position:absolute;inset:0;z-index:12;cursor:crosshair;touch-action:none;user-select:none}
#premiumCardEditor .premium-editor-crop-box{position:absolute;box-sizing:border-box;border:2px solid #0e7490;outline:1px solid #fff;background:rgba(56,189,248,.09);box-shadow:0 0 0 1px #0f172a,0 0 14px #0e749088;cursor:move;touch-action:none}
#premiumCardEditor .premium-editor-crop-handle{position:absolute;box-sizing:border-box;display:block;width:8px;height:8px;background:#facc15;opacity:1;border:1.5px solid #082f49;border-radius:2px;box-shadow:0 0 0 1px #fff,0 1px 4px #000c;z-index:2;touch-action:none}
#premiumCardEditor .premium-editor-crop-handle.nw{left:-5px;top:-5px;cursor:nwse-resize}
#premiumCardEditor .premium-editor-crop-handle.n{left:50%;top:-5px;transform:translateX(-50%);cursor:ns-resize}
#premiumCardEditor .premium-editor-crop-handle.ne{right:-5px;top:-5px;cursor:nesw-resize}
#premiumCardEditor .premium-editor-crop-handle.e{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
#premiumCardEditor .premium-editor-crop-handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}
#premiumCardEditor .premium-editor-crop-handle.s{left:50%;bottom:-5px;transform:translateX(-50%);cursor:ns-resize}
#premiumCardEditor .premium-editor-crop-handle.sw{left:-5px;bottom:-5px;cursor:nesw-resize}
#premiumCardEditor .premium-editor-crop-handle.w{left:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
#premiumCardEditor .premium-editor-layer.premium-editor-cropped .premium-editor-handle{width:8px;height:8px;border:1.5px solid #082f49;background:#facc15;opacity:1;box-shadow:0 0 0 1px #fff,0 1px 4px #000b}

#premiumCardEditor .premium-editor-crop-help{margin:9px 0;padding:9px 12px;border:1px solid #0e7490;border-radius:8px;background:#e0f2fe;color:#0c4a6e;font-size:12px;line-height:1.5;text-align:left}
@media(max-width:550px){#premiumCardEditor .premium-editor-crop-handle,#premiumCardEditor .premium-editor-layer.premium-editor-cropped .premium-editor-handle{width:7px;height:7px}#premiumCardEditor .premium-editor-crop-help{font-size:11px}}

/* Personal Admin Notice: preserve owner-authored Hindi/Marathi/English text, emojis and line breaks.
   Never style the authored message as a ticker or let narrow layouts clip its contents. */
#mainApp #distributorNoticeText.admin-authored-message {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.75;
  font-family:"Noto Sans Devanagari","Nirmala UI","Mangal",system-ui,sans-serif;
  font-size:clamp(13px,1.1vw,15px);
  text-align:start;
  unicode-bidi:plaintext;
}
#mainApp #distributorNoticeBanner {
  overflow:visible;
}
#mainApp #distributorNoticeBanner > div > div:first-child {
  min-width:0!important;
  overflow-wrap:anywhere;
}