:root{--background-color: #FFFFFF;--text-color: #222222;--border-color: #E0E0E0;--input-background: #FFFFFF;--button-secondary-background: #E0E0E0;--button-secondary-hover: #D0D0D0}.dark-mode{--background-color: #2D2D2D;--text-color: #FFFFFF;--border-color: #444444;--input-background: #363636;--button-secondary-background: #444444;--button-secondary-hover: #555555}:root{--cat-yellow: #FDB515;--cat-yellow-hover: #FFc642;--cat-yellow-light: rgba(253, 181, 21, .2);--header-background: rgba(255, 255, 255, .8);--header-background-dark: rgba(45, 45, 45, .8)}.scanner-app{min-height:100vh;height:100vh;position:relative;font-family:Arial,sans-serif;overflow:hidden;display:flex;flex-direction:column}.scanner-app:before{content:"";position:absolute;inset:0;background:url(/finning-background.jpg) center center/cover fixed;transition:opacity .5s ease,filter .5s ease;z-index:-2;will-change:opacity,filter}@media (min-width: 1024px){.scanner-app:before{background-image:url(/finning-background-desktop.jpg)}}.scanner-app.dark-mode:before{filter:brightness(.6)}.scanner-app.dark-mode{color:#fff}.content-wrapper{flex:1;padding:20px 20px 100px;overflow-y:auto;backdrop-filter:blur(1px);display:flex;flex-direction:column}header,.dark-mode header{text-align:left;margin-bottom:20px;padding:15px;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(2px)}header{background:var(--header-background)}.dark-mode header{background:var(--header-background-dark)}.header-content{flex:initial;text-align:left;display:flex;align-items:center;gap:15px}.theme-toggle{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease}.theme-toggle:hover{background-color:#0000001a}.dark-mode .theme-toggle:hover{background-color:#ffffff1a}.cat-logo{height:40px;width:auto;object-fit:contain}.scanner-section{display:flex;flex-direction:column;gap:20px;max-width:500px;margin:0 auto;width:100%;flex:1;will-change:transform}.scanner-wrapper{transition:all .3s ease;max-height:400px;opacity:1;transform:translateZ(0)}.scanner-wrapper.hidden{max-height:0;opacity:0;margin:0;pointer-events:none}.codes-display,.dark-mode .codes-display,.machine-data-group,.dark-mode .machine-data-group,.machine-data-header,.dark-mode .machine-data-header{border-radius:12px;box-shadow:0 2px 4px #0000001a}.codes-display{background:#fff;padding:20px;display:flex;flex-direction:column;gap:16px}.dark-mode .codes-display{background:#2d2d2d}.machine-data-group,.component-group{background:#ffffff80;border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 2px 4px #0000000d;border:2px solid transparent;transition:all .3s ease;cursor:pointer}.dark-mode .machine-data-group,.dark-mode .component-group{background:#3b3b3b80;border:2px solid transparent}.machine-data-header,.component-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.1)}.dark-mode .machine-data-header,.dark-mode .component-header{border-bottom:1px solid rgba(255,255,255,.1)}.machine-data-header h3,.component-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.dark-mode .machine-data-header h3,.dark-mode .component-header h3{color:#fff}.machine-data-group.selected,.component-group.selected{border-color:var(--cat-yellow);border-width:2px;background-color:transparent;box-shadow:0 4px 8px #fdb51533;transform:scale(1.02)}.dark-mode .machine-data-group.selected,.dark-mode .component-group.selected{background-color:transparent;border-color:var(--cat-yellow)}.machine-data-group.selected .code-item,.component-group.selected .code-item,.dark-mode .machine-data-group.selected .code-item,.dark-mode .component-group.selected .code-item{border-top:2px solid var(--cat-yellow)}.machine-data-group.completed,.component-group.completed{cursor:default}.reset-all-button{background:#ff9800cc;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .3s ease;font-weight:500}.reset-all-button:hover{background:#ff9800;transform:translateY(-1px)}.reset-all-button:disabled{opacity:.5;cursor:not-allowed}.reset-all-button .icon{font-size:14px;transition:transform .3s ease}.reset-all-button:hover .icon{transform:rotate(180deg)}.skip-button{background:#ff9800cc;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .3s ease;font-weight:500}.skip-button:hover{background:#ff9800;transform:translateY(-1px)}.skip-button .icon{font-size:14px}.undo-skip-button{background:var(--cat-yellow);color:#000;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .3s ease;font-weight:500}.undo-skip-button:hover{background:var(--cat-yellow-hover);transform:translateY(-1px)}.undo-skip-button .icon{font-size:14px;transition:transform .3s ease}.undo-skip-button:hover .icon{transform:rotate(180deg)}.component-group.skipped{background:#ff98001a;border:2px solid rgba(255,152,0,.3);opacity:.8;cursor:default}.dark-mode .component-group.skipped{background:#ff980026;border:2px solid rgba(255,152,0,.4)}.nested-code-display{margin-left:24px;margin-top:18px;position:relative}.nested-code-display:before{content:"";position:absolute;top:-18px;left:-24px;width:24px;height:calc(50% + 22px);border-left:2px dashed rgba(0,0,0,.2);border-bottom:2px dashed rgba(0,0,0,.2);border-bottom-left-radius:10px}.dark-mode .nested-code-display:before{border-left:2px dashed rgba(255,255,255,.2);border-bottom:2px dashed rgba(255,255,255,.2)}.code-item{position:relative;padding:15px;border-radius:8px;background:#f8f8f8;transition:all .3s ease;border:2px solid transparent;margin:0}.dark-mode .code-item{background:#363636}.code-item:last-child{margin-bottom:0}.code-item.selected{border-color:var(--cat-yellow);background-color:transparent;transform:scale(1.02);box-shadow:0 4px 8px #fdb51533}.dark-mode .code-item.selected{background-color:transparent}.code-item.completed{opacity:.9;background:#f8f8f8;border-color:transparent;transform:none;box-shadow:none}.dark-mode .code-item.completed{background:#363636}.code-label{font-size:14px;color:#666;margin-bottom:5px}.dark-mode .code-label{color:#b3b3b3}.code-value{font-size:18px;color:#222;font-weight:700;word-break:break-all;padding:5px;border-radius:4px;transition:background-color .3s ease}.code-value.clickable{cursor:pointer}.code-value.clickable:hover{background-color:var(--cat-yellow-light)}.dark-mode .code-value{color:#fff}.reset-button{position:absolute;right:10px;top:25%;transform:translateY(-50%);background:none;border:none;color:var(--cat-yellow);cursor:pointer;font-size:28px;padding:10px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transition:color .3s ease}.reset-button:hover{color:var(--cat-yellow-hover)}.icon{display:inline-block;transition:transform .3s ease;font-size:28px}.reset-button:hover .icon{transform:rotate(180deg)}.confirm-wrapper{position:fixed;bottom:0;left:0;right:0;padding:20px;background:var(--header-background);transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -2px 10px #0000001a;backdrop-filter:blur(2px)}.dark-mode .confirm-wrapper{background:var(--header-background-dark)}.confirm-wrapper.visible{transform:translateY(0)}.confirm-button{background:var(--cat-yellow);color:#000;border:none;padding:18px 30px;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;width:100%;max-width:500px;margin:0 auto;display:block;transition:all .3s ease;transform:translateY(0);box-shadow:0 2px 4px #0000001a}.confirm-button:hover{background:var(--cat-yellow-hover);transform:translateY(-2px);box-shadow:0 4px 6px #00000026}.loading-screen{position:fixed;inset:0;background:var(--background-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:1000}.loading-logo{height:60px;width:auto;object-fit:contain}.loading-spinner{width:40px;height:40px;border:4px solid var(--cat-yellow);border-top:4px solid transparent;border-radius:50%;animation:spin 1s linear infinite}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(3px);padding:20px}.modal-content{background:var(--background-color);padding:20px;border-radius:12px;width:min(90%,400px);box-shadow:0 4px 6px #0000001a;box-sizing:border-box}.modal-content h2{margin:0 0 20px;color:var(--text-color);font-size:20px;word-break:break-word}.modal-content input{width:100%;padding:12px;border:2px solid var(--border-color);border-radius:8px;font-size:16px;background:var(--input-background);color:var(--text-color);margin-bottom:20px;box-sizing:border-box}.modal-content input:focus{outline:none;border-color:var(--cat-yellow)}.modal-buttons{display:flex;gap:10px;justify-content:flex-end}.modal-buttons button{padding:10px 20px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s ease}.modal-buttons .cancel-button{background:var(--button-secondary-background);color:var(--text-color);border:none}.modal-buttons .cancel-button:hover{background:var(--button-secondary-hover)}.modal-buttons .confirm-button{background:var(--cat-yellow);color:#000;border:none}.modal-buttons .confirm-button:hover{background:var(--cat-yellow-hover)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 480px){.content-wrapper{padding:10px 10px 90px}.code-value{font-size:16px}.confirm-wrapper{padding:15px}.confirm-button{padding:16px 20px}}.selected-field{background:var(--header-background);padding:15px;border-radius:8px;margin-bottom:16px;text-align:left;font-weight:500;color:var(--text-color);box-shadow:0 2px 4px #0000001a;backdrop-filter:blur(2px);display:flex;align-items:center;gap:10px}.selected-field:before{content:"";width:8px;height:8px;background-color:var(--cat-yellow);border-radius:50%;display:inline-block;animation:pulse 2s infinite}.dark-mode .selected-field{background:var(--header-background-dark);color:#fff}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #fdb515b3}70%{transform:scale(1);box-shadow:0 0 0 6px #fdb51500}to{transform:scale(.95);box-shadow:0 0 #fdb51500}}.code-item.disabled{opacity:.6;cursor:default;pointer-events:none}.code-item.disabled .code-value{cursor:default;color:#ff9800cc;font-weight:500}.dark-mode .code-item.disabled .code-value{color:#ff9800e6}