:root{--red:#d8071d;--red-dark:#a90617;--black:#111315;--ink:#16181b;--muted:#70747a;--line:#e6e7e9;--bg:#f4f5f6;--card:#fff;--green:#11a348;--orange:#f38b00;--radius:18px;--shadow:0 6px 24px rgba(0,0,0,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.loading-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;background:linear-gradient(145deg,#090a0b,#212326);color:#fff}.loading-logo{width:92px;height:92px;border-radius:20px}.loading-screen p{margin:0;color:#d8dade}.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#090a0b,#212326);padding:24px}.login-card{width:min(430px,100%);background:#fff;border-radius:26px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.4)}.brand-image{display:block;width:240px;max-width:80%;margin:0 auto 18px}.login-card h1{margin:0;text-align:center}.login-card>p{text-align:center;color:var(--muted);margin:8px 0 24px}.login-card>small{display:block;color:var(--muted);margin-top:18px;text-align:center;line-height:1.45}.offline-notice{margin-top:14px;background:#fff0da;border:1px solid #ffd496;color:#774300;padding:12px;border-radius:12px;font-size:.85rem;line-height:1.45}
label{display:grid;gap:7px;font-weight:650;font-size:.9rem;margin:13px 0}input,select,textarea{width:100%;border:1px solid #d9dce0;border-radius:12px;padding:12px 13px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,7,29,.1)}input:disabled{background:#f1f2f3;color:#777}.primary,.secondary,.danger{border:0;border-radius:12px;padding:12px 16px;font-weight:750}.primary{background:var(--red);color:#fff}.primary:hover{background:var(--red-dark)}.primary:disabled{opacity:.6;cursor:wait}.secondary{background:#f0f1f2;color:var(--ink)}.danger{background:#fff0f1;color:#a80013}.full{width:100%}
.app-shell{min-height:100vh;padding-bottom:82px}.topbar{position:sticky;top:0;z-index:20;min-height:112px;background:linear-gradient(135deg,#111315,#23262a);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;color:#fff;overflow:hidden}.top-brand{display:block;width:auto;height:68px;max-width:56%;object-fit:contain;object-position:left center;flex:0 1 auto}.sync-status{border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:8px;text-align:left;padding:8px;border-radius:12px;flex:0 0 auto;min-width:0}.sync-status .sync-icon{color:#ff2740;font-size:1.8rem}.sync-status b,.sync-status small{display:block}.sync-status small{font-size:.72rem;color:#d3d4d6}.sync-status.pending .sync-icon{color:var(--orange)}.sync-status.error .sync-icon{color:#ff7a7a}.sync-status.syncing .sync-icon{animation:spin .8s linear infinite}
.main-content{width:min(900px,100%);margin:0 auto;padding:14px}.view{display:none}.view.active{display:block}.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 12px}.section-title h2{margin:0;font-size:1.1rem}.link-btn{border:0;background:transparent;color:var(--red);text-decoration:underline;padding:5px}.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.summary-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;min-height:115px}.summary-icon{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:1.55rem;font-weight:800}.summary-card small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;font-weight:750}.summary-card strong{display:block;font-size:1.55rem;margin:3px 0}.summary-card p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.25}.bg-red{background:linear-gradient(145deg,#ec1029,#b80013)}.bg-black{background:linear-gradient(145deg,#30343a,#0b0c0d)}.bg-orange{background:linear-gradient(145deg,#ffab00,#ef7900)}.bg-green{background:linear-gradient(145deg,#21b85b,#078e39)}.text-red{color:var(--red)}.text-orange{color:var(--orange)}.text-green{color:var(--green)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quick-card{border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px 7px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.quick-card span{font-size:2rem;color:var(--red);line-height:1}.quick-card b{margin-top:7px;font-size:.88rem}.quick-card small{color:var(--muted);font-size:.68rem;margin-top:3px}
.list-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.product-row,.movement-row{display:grid;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid #eceef0}.product-row:last-child,.movement-row:last-child{border-bottom:0}.product-row{grid-template-columns:52px minmax(0,1fr) auto auto}.product-photo{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#f0f1f2}.row-main{min-width:0}.row-main b,.row-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-main small{color:var(--muted);margin-top:3px}.qty{font-weight:800}.badge{border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:800}.badge.low{background:#ffe5e8;color:#b90016}.badge.ok{background:#e0f6e8;color:#087d34}.badge.pending{background:#fff0d8;color:#8a4c00}.movement-row{grid-template-columns:40px minmax(0,1fr) auto}.move-icon{width:36px;height:36px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:900}.movement-meta{text-align:right}.movement-meta small{display:block;color:var(--muted);margin-top:4px}.empty{padding:26px;text-align:center;color:var(--muted)}
.page-head{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 16px}.page-head h1{margin:0;font-size:1.4rem}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.segment{border:1px solid var(--line);background:#fff;border-radius:14px;padding:16px;text-align:center;font-weight:800}.segment.entry{color:var(--green)}.segment.exit{color:var(--red)}.search-row{display:flex;gap:8px;margin-bottom:12px}.search-row input{margin:0}.filter-select{max-width:155px}.stock-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px;display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center}.stock-card img{width:64px;height:64px;object-fit:cover;border-radius:12px;background:#f0f1f2}.stock-card small{display:block}.stock-actions{display:grid;gap:7px}.mini-btn{border:0;border-radius:9px;padding:8px 10px;font-size:.75rem;font-weight:800}.mini-btn.edit{background:#f0f1f2}.mini-btn.move{background:#ffe6e9;color:#b80013}.kpi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}.kpi strong{display:block;font-size:1.2rem}.kpi small{color:var(--muted)}.report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.report-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}.report-table th,.report-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:.8rem}.report-table th{background:#f4f5f6}.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}.settings-card h3{margin:0 0 10px}.settings-card p{color:var(--muted);line-height:1.5}.settings-card .button-row{display:flex;gap:8px;flex-wrap:wrap}.queue-list{margin:10px 0 0;padding:0;list-style:none}.queue-list li{border-top:1px solid var(--line);padding:9px 0;font-size:.8rem;color:var(--muted)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(12px)}.nav-item{border:0;background:transparent;color:#282b30;padding:5px 2px;display:grid;justify-items:center;gap:2px}.nav-item span{font-size:1.45rem;line-height:1}.nav-item small{font-size:.68rem}.nav-item.active{color:var(--red)}
.modal{width:min(620px,calc(100% - 20px));max-height:92vh;border:0;border-radius:22px;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.4)}.modal::backdrop{background:rgba(0,0,0,.55)}.modal form{padding:18px;overflow:auto;max-height:92vh}.modal-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-18px;background:#fff;padding:8px 0 12px;z-index:2}.modal-head h2{margin:0}.icon-btn{width:38px;height:38px;border:0;border-radius:50%;font-size:1.6rem}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px}.form-grid .wide{grid-column:1/-1}.photo-picker{display:flex;align-items:center;gap:14px;background:#f5f6f7;padding:12px;border-radius:14px}.photo-picker img{width:88px;height:88px;object-fit:cover;border-radius:13px;background:#fff}.photo-picker>div{min-width:0}.photo-picker small{display:block;color:var(--muted);margin-top:7px;line-height:1.35}.file-label{display:inline-block;margin:0;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;flex-wrap:wrap}.info-box{background:#f4f5f6;border-radius:12px;padding:12px;color:var(--muted);font-size:.85rem}.toast{position:fixed;z-index:100;left:50%;bottom:100px;transform:translate(-50%,20px);background:#16181b;color:#fff;padding:11px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.22s;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
.install-help{background:#eef5ff;border:1px solid #d4e5ff;border-radius:13px;padding:12px;color:#294b78;font-size:.85rem;line-height:1.45}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.status-dot.online{background:var(--green)}.status-dot.offline{background:var(--orange)}
@media(max-width:520px){.topbar{min-height:102px;padding:calc(8px + env(safe-area-inset-top)) 13px 8px;gap:7px}.top-brand{width:auto;height:56px;max-width:54%;object-fit:contain}.sync-status{gap:5px;padding:6px 0}.sync-status .sync-icon{font-size:1.45rem}.sync-status b{font-size:.88rem;white-space:nowrap}.sync-status small{font-size:.61rem;white-space:nowrap}.summary-card{grid-template-columns:44px 1fr;padding:12px;min-height:108px}.summary-icon{width:44px;height:44px}.summary-card strong{font-size:1.35rem}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick-card{min-height:96px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.product-row{grid-template-columns:48px minmax(0,1fr) auto}.product-row .badge{display:none}.movement-row{grid-template-columns:36px minmax(0,1fr)}.movement-meta{grid-column:2;text-align:left}.stock-card{grid-template-columns:58px 1fr}.stock-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.kpi-strip{grid-template-columns:1fr}.report-table th:nth-child(5),.report-table td:nth-child(5){display:none}.login-card{padding:24px 20px}}

/* Animações profissionais — v1.1.0 */
:root{--motion-fast:160ms;--motion-normal:320ms;--motion-slow:520ms;--motion-ease:cubic-bezier(.22,1,.36,1)}

.primary,.secondary,.danger,.quick-card,.segment,.mini-btn,.nav-item,.sync-status,.icon-btn,.link-btn{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--motion-fast) ease,box-shadow var(--motion-normal) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,opacity var(--motion-fast) ease;
}
.primary:active,.secondary:active,.danger:active,.quick-card:active,.segment:active,.mini-btn:active,.nav-item:active,.sync-status:active,.icon-btn:active,.link-btn:active{transform:scale(.96)}
input,select,textarea{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,background-color var(--motion-fast) ease}
.summary-card,.list-card,.stock-card,.kpi,.settings-card,.login-card{transition:transform var(--motion-normal) var(--motion-ease),box-shadow var(--motion-normal) var(--motion-ease),border-color var(--motion-normal) ease}
.summary-icon,.quick-card span,.move-icon,.product-photo,.stock-card img{transition:transform var(--motion-normal) var(--motion-ease),filter var(--motion-normal) ease}
.nav-item span{transition:transform var(--motion-normal) var(--motion-ease)}
.sync-status .sync-icon{transform-origin:center;transition:transform var(--motion-normal) var(--motion-ease),color var(--motion-fast) ease}
.photo-picker img{transition:transform var(--motion-normal) var(--motion-ease),opacity var(--motion-fast) ease}

@media(hover:hover) and (pointer:fine){
  .summary-card:hover,.list-card:hover,.stock-card:hover,.kpi:hover,.settings-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(17,19,21,.10);border-color:#d9dbde}
  .quick-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(17,19,21,.11);border-color:#d7d9dc}
  .quick-card:hover span{transform:translateY(-3px) scale(1.08)}
  .primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(216,7,29,.22)}
  .secondary:hover,.mini-btn:hover,.segment:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(17,19,21,.08)}
  .nav-item:hover span{transform:translateY(-2px)}
  .sync-status:hover{background:rgba(255,255,255,.07)}
  .sync-status:hover .sync-icon{transform:rotate(35deg)}
  .product-row:hover,.movement-row:hover{background:#fafafb}
}

@media(prefers-reduced-motion:no-preference){
  .loading-logo{animation:logoBreath 1.9s ease-in-out infinite}
  .loading-screen p{animation:softPulse 1.9s ease-in-out infinite}
  .login-screen:not(.hidden) .login-card{animation:loginEnter .58s var(--motion-ease) both}
  .login-screen:not(.hidden) .brand-image{animation:brandEnter .72s .08s var(--motion-ease) both}
  .app-shell:not(.hidden) .topbar{animation:topbarEnter .52s var(--motion-ease) both}
  .app-shell:not(.hidden) .top-brand{animation:brandEnter .62s .08s var(--motion-ease) both}
  .app-shell:not(.hidden) .bottom-nav{animation:navBarEnter .5s .12s var(--motion-ease) both}
  .view.active{animation:viewEnter .34s var(--motion-ease) both}

  .view.active .summary-card{animation:cardEnter .52s var(--motion-ease) both}
  .view.active .summary-card:nth-child(1){animation-delay:.03s}
  .view.active .summary-card:nth-child(2){animation-delay:.09s}
  .view.active .summary-card:nth-child(3){animation-delay:.15s}
  .view.active .summary-card:nth-child(4){animation-delay:.21s}
  .view.active .summary-card .summary-icon{animation:iconPop .48s .18s var(--motion-ease) both}
  .view.active .summary-card strong{animation:valueSettle .48s .18s var(--motion-ease) both}

  .view.active .section-title{animation:sectionEnter .42s .12s var(--motion-ease) both}
  .view.active .quick-card{animation:cardEnter .48s var(--motion-ease) both}
  .view.active .quick-card:nth-child(1){animation-delay:.10s}
  .view.active .quick-card:nth-child(2){animation-delay:.16s}
  .view.active .quick-card:nth-child(3){animation-delay:.22s}
  .view.active .quick-card:nth-child(4){animation-delay:.28s}
  .view.active .quick-card span{animation:iconPop .44s .22s var(--motion-ease) both}

  .view.active .list-card,.view.active .stock-card,.view.active .kpi,.view.active .settings-card,.view.active .segmented,.view.active .search-row,.view.active .report-actions,.view.active .report-table{animation:surfaceEnter .46s .14s var(--motion-ease) both}
  .view.active .product-row,.view.active .movement-row{animation:rowEnter .38s var(--motion-ease) both}
  .view.active .product-row:nth-child(1),.view.active .movement-row:nth-child(1){animation-delay:.04s}
  .view.active .product-row:nth-child(2),.view.active .movement-row:nth-child(2){animation-delay:.08s}
  .view.active .product-row:nth-child(3),.view.active .movement-row:nth-child(3){animation-delay:.12s}
  .view.active .product-row:nth-child(4),.view.active .movement-row:nth-child(4){animation-delay:.16s}
  .view.active .product-row:nth-child(5),.view.active .movement-row:nth-child(5){animation-delay:.20s}

  .nav-item.active span{animation:navItemPop .4s var(--motion-ease)}
  .sync-status.pending .sync-icon{animation:pendingPulse 1.6s ease-in-out infinite}
  .sync-status.error .sync-icon{animation:errorNudge .55s ease-in-out}
  dialog.modal[open]{animation:modalEnter .38s var(--motion-ease) both}
  dialog.modal[open]::backdrop{animation:backdropEnter .28s ease-out both}
  .toast.show{animation:toastPop .28s var(--motion-ease) both}
  .badge.low{animation:lowStockPulse 2.6s ease-in-out infinite}
}

@keyframes logoBreath{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(216,7,29,0))}50%{transform:scale(1.045);filter:drop-shadow(0 8px 18px rgba(216,7,29,.28))}}
@keyframes softPulse{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes loginEnter{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@keyframes topbarEnter{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes navBarEnter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes brandEnter{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes viewEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cardEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes surfaceEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sectionEnter{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes rowEnter{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes iconPop{0%{opacity:0;transform:scale(.72) rotate(-5deg)}70%{opacity:1;transform:scale(1.08) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes valueSettle{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes navItemPop{0%{transform:scale(.82) translateY(2px)}65%{transform:scale(1.14) translateY(-2px)}100%{transform:none}}
@keyframes pendingPulse{0%,100%{transform:rotate(0) scale(1);opacity:.8}50%{transform:rotate(22deg) scale(1.08);opacity:1}}
@keyframes errorNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@keyframes modalEnter{from{opacity:0;transform:translateY(24px) scale(.965)}to{opacity:1;transform:none}}
@keyframes backdropEnter{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.55)}}
@keyframes toastPop{0%{opacity:0;transform:translate(-50%,18px) scale(.94)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes lowStockPulse{0%,100%{box-shadow:0 0 0 0 rgba(216,7,29,0)}50%{box-shadow:0 0 0 5px rgba(216,7,29,.08)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}


/* Atualização automática + puxar para atualizar — v1.2.1 */
html,body{overscroll-behavior-y:contain}
.app-shell{overscroll-behavior-y:contain}
.main-content{--pull-shift:0px;transform:translateY(var(--pull-shift));transition:transform 220ms cubic-bezier(.22,1,.36,1);will-change:transform}
.app-shell.is-pulling .main-content{transition:none}
.pull-refresh{--pull-distance:0px;position:fixed;z-index:70;left:50%;top:calc(env(safe-area-inset-top) + 10px);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 28px);padding:9px 14px;border-radius:999px;background:rgba(17,19,21,.96);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.26);opacity:0;pointer-events:none;transform:translate(-50%,calc(-58px + var(--pull-distance))) scale(.94);transition:opacity 150ms ease,transform 190ms cubic-bezier(.22,1,.36,1),background-color 160ms ease;white-space:nowrap;font-size:.78rem}
.pull-refresh.visible{opacity:1}
.pull-refresh.ready{background:rgba(216,7,29,.97)}
.pull-refresh.refreshing{opacity:1;transform:translate(-50%,16px) scale(1)}
.pull-refresh.done{background:rgba(17,163,72,.97)}
.pull-refresh.error{background:rgba(177,20,35,.97)}
.pull-refresh-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:1.05rem;transform:rotate(calc(var(--pull-distance) * 3deg));transform-origin:center}
.pull-refresh.refreshing .pull-refresh-icon{animation:pullRefreshSpin .75s linear infinite}
@keyframes pullRefreshSpin{to{transform:rotate(360deg)}}

/* Reproduz a entrada profissional ao trocar/atualizar a tela. */
@media(prefers-reduced-motion:no-preference){
  .view.active.motion-replay{animation:viewEnter .34s var(--motion-ease) both}
  .view.active.motion-replay .summary-card{animation:cardEnter .52s var(--motion-ease) both}
  .view.active.motion-replay .summary-card:nth-child(1){animation-delay:.03s}
  .view.active.motion-replay .summary-card:nth-child(2){animation-delay:.09s}
  .view.active.motion-replay .summary-card:nth-child(3){animation-delay:.15s}
  .view.active.motion-replay .summary-card:nth-child(4){animation-delay:.21s}
  .view.active.motion-replay .quick-card{animation:cardEnter .48s var(--motion-ease) both}
  .view.active.motion-replay .quick-card:nth-child(1){animation-delay:.08s}
  .view.active.motion-replay .quick-card:nth-child(2){animation-delay:.14s}
  .view.active.motion-replay .quick-card:nth-child(3){animation-delay:.20s}
  .view.active.motion-replay .quick-card:nth-child(4){animation-delay:.26s}
  .view.active.motion-replay .list-card,.view.active.motion-replay .stock-card,.view.active.motion-replay .kpi,.view.active.motion-replay .settings-card,.view.active.motion-replay .segmented,.view.active.motion-replay .search-row,.view.active.motion-replay .report-actions,.view.active.motion-replay .report-table{animation:surfaceEnter .46s .10s var(--motion-ease) both}
}
@media(prefers-reduced-motion:reduce){.pull-refresh,.pull-refresh-icon,.main-content{transition:none!important;animation:none!important}}

/* Tema claro/escuro em todo o aplicativo — v1.3.1 */
.app-shell,.main-content,.view,.bottom-nav,.modal,.modal form,.modal-head,
.summary-card,.quick-card,.list-card,.segment,.stock-card,.kpi,.report-table,.report-table th,.report-table td,
.settings-card,.theme-option,.product-row,.movement-row,input,select,textarea,.secondary,.danger,.mini-btn,.photo-picker,.info-box,.icon-btn{
  transition:background-color var(--motion-normal) var(--motion-ease),color var(--motion-normal) var(--motion-ease),border-color var(--motion-normal) var(--motion-ease),box-shadow var(--motion-normal) var(--motion-ease)
}
.theme-settings-card>p{margin-top:0}
.theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-option{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink);padding:12px;min-height:88px;transition:transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.theme-option::after{content:'✓';position:absolute;right:9px;top:9px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--red);color:#fff;font-size:.75rem;font-weight:900;opacity:0;transform:scale(.65);transition:opacity var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
.theme-option.active{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,7,29,.10)}
.theme-option.active::after{opacity:1;transform:scale(1)}
.theme-option b{align-self:end;padding-right:20px}
.theme-option small{align-self:start;color:var(--muted);line-height:1.3}
.theme-preview{grid-row:1/3;width:62px;height:54px;border-radius:10px;padding:7px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;border:1px solid rgba(0,0,0,.08);overflow:hidden}
.theme-preview i{display:block;border-radius:4px}
.theme-preview i:first-child{grid-row:1/3}
.theme-preview-light{background:#f4f5f6}.theme-preview-light i{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.10)}
.theme-preview-dark{background:#0d0f11;border-color:#30343a}.theme-preview-dark i{background:#1b1e22;box-shadow:0 1px 3px rgba(0,0,0,.35)}

.app-shell.app-theme-dark{
  --ink:#f4f6f8;
  --muted:#aeb4bb;
  --line:#30343a;
  --bg:#0d0f11;
  --card:#1a1d20;
  --green:#35c96f;
  --orange:#ffa22b;
  background:#0d0f11;
  color:#f4f6f8;
  color-scheme:dark
}
.app-shell.app-theme-dark .main-content,
.app-shell.app-theme-dark .view{background:#0d0f11;color:#f4f6f8}
.app-shell.app-theme-dark .summary-card,
.app-shell.app-theme-dark .quick-card,
.app-shell.app-theme-dark .list-card,
.app-shell.app-theme-dark .segment,
.app-shell.app-theme-dark .stock-card,
.app-shell.app-theme-dark .kpi,
.app-shell.app-theme-dark .report-table,
.app-shell.app-theme-dark .settings-card,
.app-shell.app-theme-dark .theme-option{background:#1a1d20;border-color:#30343a;color:#f4f6f8;box-shadow:0 7px 22px rgba(0,0,0,.22)}
.app-shell.app-theme-dark .section-title h2,
.app-shell.app-theme-dark .page-head h1,
.app-shell.app-theme-dark .quick-card b,
.app-shell.app-theme-dark .row-main b,
.app-shell.app-theme-dark .movement-meta b,
.app-shell.app-theme-dark .qty,
.app-shell.app-theme-dark .stock-card b,
.app-shell.app-theme-dark .stock-card strong,
.app-shell.app-theme-dark .kpi strong,
.app-shell.app-theme-dark .settings-card h3,
.app-shell.app-theme-dark .theme-option b,
.app-shell.app-theme-dark .report-table td,
.app-shell.app-theme-dark .report-table th{color:#f4f6f8}
.app-shell.app-theme-dark .summary-card small,
.app-shell.app-theme-dark .summary-card p,
.app-shell.app-theme-dark .quick-card small,
.app-shell.app-theme-dark .row-main small,
.app-shell.app-theme-dark .movement-meta small,
.app-shell.app-theme-dark .stock-card small,
.app-shell.app-theme-dark .kpi small,
.app-shell.app-theme-dark .settings-card p,
.app-shell.app-theme-dark .theme-option small,
.app-shell.app-theme-dark .queue-list li,
.app-shell.app-theme-dark .empty{color:#aeb4bb}
.app-shell.app-theme-dark .product-row,
.app-shell.app-theme-dark .movement-row,
.app-shell.app-theme-dark .queue-list li,
.app-shell.app-theme-dark .report-table td,
.app-shell.app-theme-dark .report-table th{border-color:#2b3035}
.app-shell.app-theme-dark .product-photo,
.app-shell.app-theme-dark .stock-card img{background:#24282d}
.app-shell.app-theme-dark .report-table th{background:#24282d}
.app-shell.app-theme-dark input,
.app-shell.app-theme-dark select,
.app-shell.app-theme-dark textarea{background:#15181b;border-color:#383d44;color:#f4f6f8}
.app-shell.app-theme-dark input::placeholder,
.app-shell.app-theme-dark textarea::placeholder{color:#828891}
.app-shell.app-theme-dark input:disabled{background:#202429;color:#8f959d}
.app-shell.app-theme-dark .secondary,
.app-shell.app-theme-dark .mini-btn.edit{background:#2a2e33;color:#f4f6f8}
.app-shell.app-theme-dark .danger{background:#43141a;color:#ff9eaa}
.app-shell.app-theme-dark .mini-btn.move{background:#4a161e;color:#ff9aa6}
.app-shell.app-theme-dark .badge.low{background:#4a161e;color:#ff9aa6}
.app-shell.app-theme-dark .badge.ok{background:#123b25;color:#79e8a5}
.app-shell.app-theme-dark .badge.pending{background:#473516;color:#ffd07d}
.app-shell.app-theme-dark .bottom-nav{background:rgba(20,22,25,.97);border-top-color:#30343a}
.app-shell.app-theme-dark .nav-item{color:#d9dde1}
.app-shell.app-theme-dark .nav-item.active{color:#ff3148}
.app-shell.app-theme-dark .theme-option.active{border-color:var(--red);box-shadow:0 0 0 3px rgba(216,7,29,.18)}

.modal.app-theme-dark{
  --ink:#f4f6f8;
  --muted:#aeb4bb;
  --line:#30343a;
  color:#f4f6f8;
  color-scheme:dark;
  background:#171a1d
}
.modal.app-theme-dark form,
.modal.app-theme-dark .modal-head{background:#171a1d;color:#f4f6f8}
.modal.app-theme-dark input,
.modal.app-theme-dark select,
.modal.app-theme-dark textarea{background:#101214;border-color:#383d44;color:#f4f6f8}
.modal.app-theme-dark input::placeholder,
.modal.app-theme-dark textarea::placeholder{color:#828891}
.modal.app-theme-dark input:disabled{background:#202429;color:#8f959d}
.modal.app-theme-dark .photo-picker,
.modal.app-theme-dark .info-box{background:#24282d;color:#aeb4bb}
.modal.app-theme-dark .photo-picker img{background:#101214}
.modal.app-theme-dark .secondary,
.modal.app-theme-dark .icon-btn{background:#2a2e33;color:#f4f6f8}
.modal.app-theme-dark .danger{background:#43141a;color:#ff9eaa}

@media(hover:hover) and (pointer:fine){
  .theme-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(17,19,21,.10)}
  .app-shell.app-theme-dark .summary-card:hover,
  .app-shell.app-theme-dark .quick-card:hover,
  .app-shell.app-theme-dark .list-card:hover,
  .app-shell.app-theme-dark .segment:hover,
  .app-shell.app-theme-dark .stock-card:hover,
  .app-shell.app-theme-dark .kpi:hover,
  .app-shell.app-theme-dark .settings-card:hover{border-color:#444a51;box-shadow:0 13px 30px rgba(0,0,0,.30)}
  .app-shell.app-theme-dark .product-row:hover,
  .app-shell.app-theme-dark .movement-row:hover{background:#202429}
}
@media(max-width:520px){.theme-options{grid-template-columns:1fr}.theme-option{min-height:82px}}
@media(prefers-reduced-motion:reduce){.theme-option,.theme-option::after,.app-shell,.main-content,.view,.bottom-nav,.modal,.modal form,.modal-head,.summary-card,.quick-card,.list-card,.segment,.stock-card,.kpi,.report-table,.settings-card,.product-row,.movement-row,input,select,textarea{transition:none!important}}