/* Biometric Studio v11.10.0 — mobile-first application shell.
   Loaded last. Desktop remains on the existing layout. */

@media (max-width:760px){
  :root{
    --app-header-height:0px!important;
    --mobile-action-height:60px!important;
    --mobile-tool-rail:54px;
  }

  html,body{max-width:100%;overflow-x:hidden!important}
  body.studio-app{min-height:100dvh!important;height:auto!important;padding:0!important;overflow-y:auto!important;background:#070b12!important}

  /* Floating brand: no header row, no language selector on mobile. */
  .app-header-v10{
    position:fixed!important;
    inset:8px auto auto 8px!important;
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    z-index:160!important;
    pointer-events:none!important;
  }
  .app-header-v10 .logo{width:44px!important;height:44px!important;padding:0!important;margin:0!important;pointer-events:auto!important}
  .app-header-v10 .logo b{width:44px!important;height:44px!important;min-width:44px!important;display:grid!important;place-items:center!important;border-radius:14px!important;font-size:17px!important;box-shadow:0 10px 28px rgba(77,58,216,.28)!important}
  .app-header-v10 .logo span,
  .app-header-v10 .desktop-nav,
  .app-header-v10 #language{display:none!important}
  .app-top-ad{display:none!important}

  /* Main shell now uses the full viewport. */
  .studio-shell-v10{
    display:grid!important;
    grid-template-rows:58px minmax(0,1fr)!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .steps-v10{
    position:relative!important;
    inset:auto!important;
    z-index:100!important;
    min-height:58px!important;
    height:58px!important;
    padding:7px 8px 7px 60px!important;
    border:0!important;
    border-bottom:1px solid rgba(148,163,184,.12)!important;
    border-radius:0!important;
    background:rgba(7,11,18,.96)!important;
    backdrop-filter:blur(14px)!important;
    overflow:hidden!important;
  }
  .steps-heading,.privacy-note{display:none!important}
  .steps-scroll{height:44px!important;display:flex!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
  .steps-scroll::-webkit-scrollbar{display:none!important}
  .steps-v10 .step{flex:0 0 44px!important;width:44px!important;height:44px!important;min-height:44px!important;padding:3px!important;border-radius:13px!important}
  .steps-v10 .step b{width:36px!important;height:36px!important;margin:auto!important;font-size:13px!important}
  .steps-v10 .step span{display:none!important}

  .main-card-v10{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .card-head-v10{
    position:relative!important;
    inset:auto!important;
    flex:0 0 46px!important;
    min-height:46px!important;
    padding:7px 12px!important;
    display:flex!important;
    align-items:center!important;
    background:#0a111c!important;
    border-bottom:1px solid rgba(148,163,184,.10)!important;
    backdrop-filter:none!important;
    z-index:20!important;
  }
  .card-head-v10 .eyebrow{display:none!important}
  .card-head-v10 h1{margin:0!important;font-size:18px!important;line-height:1.1!important}
  .status-pill{font-size:9px!important;padding:5px 8px!important;max-width:42vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  .screen.active,
  .editor-screen.active{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    padding:0 0 calc(62px + env(safe-area-inset-bottom))!important;
    overflow:auto!important;
  }
  .screen-scroll{padding:10px!important;max-height:none!important;overflow:visible!important}

  /* The SEO/CMS copy remains available to desktop/search engines but never steals app space on mobile. */
  .managed-app-content,
  .managed-app-content__inner{display:none!important}

  /* One compact bottom action dock replaces extra mobile content/footer space. */
  .actions-sticky{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:150!important;
    min-height:58px!important;
    display:flex!important;
    align-items:stretch!important;
    gap:7px!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    background:rgba(7,12,21,.97)!important;
    border-top:1px solid rgba(148,163,184,.13)!important;
    box-shadow:0 -10px 28px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(14px)!important;
  }
  .actions-sticky button{
    flex:1 1 0!important;
    grid-column:auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    padding:0 7px!important;
    border-radius:14px!important;
    font-size:11px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  .has-mobile-ad .actions-sticky{bottom:var(--mobile-ad-height,0px)!important}

  /* Prepare = Photoshop-like vertical rail + large photo. */
  .editor-screen.active{
    display:grid!important;
    grid-template-columns:var(--mobile-tool-rail) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .editor-toolbar-v10{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    inset:auto!important;
    z-index:45!important;
    width:var(--mobile-tool-rail)!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    display:grid!important;
    grid-auto-rows:minmax(36px,1fr)!important;
    align-content:stretch!important;
    gap:4px!important;
    padding:6px!important;
    margin:0!important;
    border:0!important;
    border-right:1px solid rgba(148,163,184,.13)!important;
    border-radius:0!important;
    background:#09111c!important;
    overflow:hidden!important;
  }
  .editor-toolbar-v10 .toolbar-spacer{display:none!important}
  .editor-toolbar-v10 button.hidden{display:none!important}
  .editor-toolbar-v10 button:not(.hidden){
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:auto!important;
    min-height:36px!important;
    max-height:46px!important;
    padding:0!important;
    margin:0!important;
    flex:none!important;
    border-radius:11px!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
    background:#111b2a!important;
    border:1px solid rgba(148,163,184,.14)!important;
    color:#f4f7fb!important;
  }
  .editor-toolbar-v10 button:not(.hidden)::before{
    content:attr(data-icon);
    display:block;
    font:700 20px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    color:inherit!important;
  }
  .editor-toolbar-v10 button span{display:none!important}
  .editor-toolbar-v10 button:hover,
  .editor-toolbar-v10 button.active,
  .editor-toolbar-v10 button.toolbar-accent{background:#17243a!important;border-color:rgba(139,92,246,.42)!important}
  .editor-toolbar-v10 #autoPrepare,
  .editor-toolbar-v10 #removeBackground{background:linear-gradient(145deg,#17233a,#151b31)!important}

  .photo-stage-v10{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:'status' 'frame' 'align'!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:7px!important;
    padding:7px 8px!important;
    margin:0!important;
    overflow:hidden!important;
    align-content:stretch!important;
  }
  #detectionStatus{grid-area:status!important;min-height:30px!important;padding:6px 8px!important;margin:0!important;font-size:10px!important;line-height:1.35!important;border-radius:11px!important}
  #photoFrame{grid-area:frame!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;align-self:center!important;justify-self:center!important;margin:0 auto!important}
  #autoAlign{grid-area:align!important;width:100%!important;min-height:38px!important;height:38px!important;margin:0!important;font-size:10px!important;border-radius:12px!important}
  #stageToolsPanel{display:none!important}

  /* Keep the actual photo visible during detection/removal and restore the face scan effect. */
  .process-overlay{
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px!important;
    background:linear-gradient(180deg,rgba(3,8,14,.10),rgba(17,10,42,.18))!important;
    backdrop-filter:none!important;
    overflow:hidden!important;
  }
  .process-overlay.hidden{display:none!important}
  .process-overlay:before{opacity:.28!important}
  .process-overlay:after{background:radial-gradient(circle at center,transparent 38%,rgba(5,9,17,.14) 100%)!important}
  .face-scan{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:min(48%,170px)!important;
    height:min(58%,230px)!important;
    border:1.5px solid rgba(104,244,225,.78)!important;
    border-radius:46% 46% 43% 43%!important;
    background:rgba(255,255,255,.018)!important;
    box-shadow:inset 0 0 36px rgba(94,234,212,.08),0 0 28px rgba(94,234,212,.16)!important;
    animation:bioFacePulse 1.55s ease-in-out infinite!important;
  }
  .face-scan i{width:24px!important;height:24px!important;filter:drop-shadow(0 0 6px rgba(169,149,255,.65))!important}
  .scan-line{
    left:25%!important;
    right:25%!important;
    top:27%!important;
    height:2px!important;
    animation:bioFaceSweep 1.55s ease-in-out infinite!important;
    opacity:.95!important;
  }
  .process-overlay strong{
    position:absolute!important;
    left:10px!important;
    right:10px!important;
    bottom:38px!important;
    max-width:none!important;
    margin:0!important;
    padding:6px 9px!important;
    border-radius:10px!important;
    background:rgba(7,12,20,.52)!important;
    font-size:10px!important;
    line-height:1.3!important;
    text-align:center!important;
  }
  .process-overlay>span{
    position:absolute!important;
    right:9px!important;
    top:9px!important;
    padding:4px 7px!important;
    font-size:10px!important;
  }
  @keyframes bioFacePulse{0%,100%{transform:translate(-50%,-50%) scale(.98);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.02);opacity:1}}
  @keyframes bioFaceSweep{0%,100%{top:27%;opacity:.55}50%{top:70%;opacity:1}}

  body.process-running .editor-toolbar-v10 button:not(.hidden){display:grid!important;opacity:.96!important}
  body.process-running .photo-stage-v10{padding-top:7px!important}

  /* Remaining workflow screens: simpler cards, larger useful area. */
  .upload-zone{min-height:0!important;padding:18px 12px!important;border-radius:18px!important}
  .source-preview{grid-template-columns:1fr!important;gap:9px!important}
  .source-photo-preview img{max-height:48dvh!important;object-fit:contain!important}
  .review-grid-v10,.export-card-v10{grid-template-columns:1fr!important;gap:10px!important;height:auto!important;overflow:visible!important}
  .review-photo,.export-photo{width:min(100%,330px)!important;min-height:0!important;max-width:330px!important;margin:0 auto!important}
  .review-photo img,.export-photo img{max-height:42dvh!important}
  .review-results,.export-info{padding:0 2px!important}
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .dialog-card,.dialog-card--wide,.dialog-card--sheet{width:100vw!important;max-height:88dvh!important;border-radius:22px 22px 0 0!important;padding:14px 12px calc(14px + env(safe-area-inset-bottom))!important}
  .tools-dialog .dialog-card--sheet{width:100vw!important;height:auto!important;max-height:90dvh!important;border-radius:22px 22px 0 0!important}
  .tool-tabs{top:58px!important}

  .mobile-fixed-ad{left:6px!important;right:6px!important;bottom:calc(60px + env(safe-area-inset-bottom))!important;max-height:50px!important;min-height:50px!important;border-radius:13px!important}
  .mobile-fixed-ad .ad-fallback,.mobile-fixed-ad ins{min-height:50px!important;max-height:50px!important}
  .has-mobile-ad .screen.active,.has-mobile-ad .editor-screen.active{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
}

@media (max-width:760px) and (max-height:680px){
  :root{--mobile-tool-rail:50px}
  .editor-toolbar-v10{width:50px!important;padding:4px!important;gap:3px!important}
  .editor-toolbar-v10 button:not(.hidden){width:40px!important;min-width:40px!important;max-width:40px!important;min-height:33px!important;max-height:40px!important}
  .editor-toolbar-v10 button:not(.hidden)::before{font-size:18px!important}
  .card-head-v10{flex-basis:42px!important;min-height:42px!important;padding:5px 10px!important}
  .photo-stage-v10{gap:5px!important;padding:5px 6px!important}
  #detectionStatus{min-height:27px!important;padding:5px 7px!important}
  #autoAlign{height:34px!important;min-height:34px!important}
}

/* Print builder mobile redesign. */
@media (max-width:900px){
  body.print-app{
    min-height:100dvh!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 0 76px!important;
  }
  .print-topbar{
    position:fixed!important;
    inset:8px auto auto 8px!important;
    z-index:160!important;
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }
  .print-topbar .print-brand{pointer-events:auto!important;width:44px!important;height:44px!important;padding:0!important}
  .print-topbar .print-brand b{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border-radius:14px!important;font-size:17px!important;box-shadow:0 10px 28px rgba(77,58,216,.28)!important}
  .print-topbar .print-brand span,.print-topbar nav,.print-topbar #printLanguage{display:none!important}

  .print-shell,
  .embedded.print-app .print-shell,
  body.embedded.print-app .print-shell{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    gap:0!important;
  }
  .print-preview-area{
    order:-1!important;
    position:sticky!important;
    top:0!important;
    z-index:35!important;
    width:100%!important;
    height:42dvh!important;
    min-height:300px!important;
    max-height:390px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto auto!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    border:0!important;
    border-bottom:1px solid rgba(148,163,184,.13)!important;
    border-radius:0!important;
    background:#080e18!important;
    box-shadow:0 10px 30px rgba(0,0,0,.28)!important;
  }
  .preview-toolbar{min-height:52px!important;padding:8px 8px 8px 60px!important;background:rgba(8,14,24,.96)!important}
  .preview-toolbar>div:first-child strong{font-size:14px!important}
  .preview-toolbar>div:first-child span{font-size:9px!important;max-width:45vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .preview-toolbar .zoom{gap:4px!important}
  .preview-toolbar .zoom button{width:32px!important;height:32px!important}
  .print-stage,.stage.print-stage{height:100%!important;min-height:0!important;padding:8px!important;overflow:hidden!important}
  .paper-preview{max-width:100%!important;max-height:100%!important}
  .paper-preview canvas{max-width:100%!important;max-height:100%!important}
  .stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1px!important;padding:0!important;background:rgba(148,163,184,.08)!important}
  .stats>div{min-width:0!important;padding:6px 4px!important;border:0!important;border-radius:0!important;background:#0b1422!important;text-align:center!important}
  .stats span{font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .stats strong{font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .print-warning{margin:0!important;padding:6px 8px!important;font-size:9px!important;border-radius:0!important}

  .print-controls{
    order:2!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    padding:10px 8px 20px!important;
    background:#070b12!important;
  }
  .print-controls-head{padding:4px 4px 8px!important}
  .print-controls-head .eyebrow{display:none!important}
  .print-controls-head h1{margin:0!important;font-size:21px!important}
  .print-controls-head p{display:none!important}
  .control-card{margin:0 0 8px!important;padding:10px!important;border-radius:15px!important}
  .section-title{margin-bottom:8px!important}
  .section-title span{width:27px!important;height:27px!important;font-size:9px!important}
  .section-title strong{font-size:12px!important}
  .upload{min-height:94px!important;padding:12px!important;border-radius:14px!important}
  .upload small{display:none!important}
  .file-chip{grid-template-columns:48px minmax(0,1fr) 36px 36px!important;gap:7px!important;padding:7px!important}
  .file-chip-preview{width:48px!important;height:58px!important}
  .photo-queue{gap:6px!important}
  .queue-photo{grid-template-columns:42px minmax(0,1fr) auto 34px!important;gap:7px!important;padding:7px!important;border-radius:12px!important}
  .queue-photo-preview{width:42px!important;height:52px!important}
  .queue-meta strong{font-size:10px!important}.queue-meta small{font-size:8px!important}
  .queue-count{height:34px!important}.queue-count button{width:30px!important}.queue-count input{width:38px!important}
  .field-grid.two,.field-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .field-grid.three>label:last-child{grid-column:1/-1!important}
  .preset-row{display:flex!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none!important}.preset-row::-webkit-scrollbar{display:none!important}
  .preset-row .chip{flex:0 0 auto!important}
  .print-advanced{margin-top:7px!important}
  .print-advanced>summary{padding:8px 0!important;font-size:11px!important}
  .print-gate{padding:9px!important;border-radius:13px!important}.print-gate p{font-size:9px!important;margin:4px 0 7px!important}
  .print-actions{
    position:sticky!important;
    bottom:6px!important;
    z-index:45!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    margin:9px -2px 0!important;
    padding:7px!important;
    border:1px solid rgba(148,163,184,.13)!important;
    border-radius:15px!important;
    background:rgba(8,14,24,.97)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(12px)!important;
  }
  .print-actions button{min-height:44px!important;font-size:11px!important;border-radius:12px!important}
}

@media (max-width:430px){
  .preview-toolbar>div:first-child span{display:none!important}
  .print-preview-area{height:40dvh!important;min-height:280px!important}
  .stats span{font-size:6px!important}.stats strong{font-size:8px!important}
}


/* v11.10.1 scan-line visibility + GPU compositing */
.process-overlay .scan-line,
.review-analysis-overlay .scan-line{
  display:block!important;
  z-index:8!important;
  pointer-events:none!important;
  height:3px!important;
  opacity:.95!important;
  background:linear-gradient(90deg,transparent 0%,#42f5df 18%,#ffffff 50%,#8b7cff 82%,transparent 100%)!important;
  box-shadow:0 0 8px rgba(66,245,223,.95),0 0 20px rgba(66,245,223,.72),0 0 30px rgba(139,124,255,.45)!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform,opacity!important;
}