:root{--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-text: #ffffff;--color-bg: #f3f4f6;--color-card: #ffffff;--color-text-primary: #1f2937;--color-text-secondary: #6b7280;--color-text-accent: #3b82f6;--color-border: #e5e7eb;--color-shadow: rgba(0,0,0,.1);--color-success: #16a34a;--color-warning: #f59e0b;--color-danger: #ef4444}body{background-color:var(--color-bg);color:var(--color-text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-text-secondary);border-radius:3px}.card{background-color:var(--color-card);border-color:var(--color-border);border-width:1px;border-style:solid;border-radius:.75rem;box-shadow:0 4px 6px -1px var(--color-shadow),0 2px 4px -2px var(--color-shadow);transition:background-color .3s}.btn{padding:.75rem 1rem;border-radius:.5rem;font-weight:600;text-align:center;transition:background-color .2s,transform .1s,color .2s,border-color .2s;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:var(--color-primary-text);border:1px solid transparent}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--color-card);border:1px solid var(--color-border);color:var(--color-text-primary)}.btn-secondary:hover{background-color:var(--color-bg)}.btn-success{background-color:var(--color-success);color:#fff;border:1px solid transparent}.btn-danger{background-color:var(--color-danger);color:#fff;border:1px solid transparent}.btn-warning{background-color:var(--color-warning);color:#1f2937;border:1px solid transparent}header,.bottom-nav,.side-nav{background-color:var(--color-card);border-color:var(--color-border)}.nav-btn.active{color:var(--color-text-accent)}.modal{display:none}.modal.flex{display:flex}.input-base{width:100%;padding:.75rem;border:1px solid var(--color-border);border-radius:.5rem;background-color:var(--color-bg);color:var(--color-text-primary)}.input-base:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-hover)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-accent{color:var(--color-text-accent)}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.bg-app{background-color:var(--color-bg)}.bg-primary{background-color:var(--color-primary)}.border-default{border-color:var(--color-border)}@keyframes toast-in{0%{transform:translateY(1.5rem);opacity:0}to{transform:translateY(0);opacity:1}}.animate-toast-in{animation:toast-in .4s ease-out forwards}@keyframes flash-green{0%,to{background-color:transparent}50%{background-color:#10b98133}}@keyframes flash-red{0%,to{background-color:transparent}50%{background-color:#ef444433}}.animate-flash-green{animation:flash-green 1s ease-in-out}.animate-flash-red{animation:flash-red 1s ease-in-out}@keyframes pulse{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}}.spinner-dot{width:1rem;height:1rem;background-color:var(--color-primary);border-radius:50%;animation:pulse 1.4s infinite ease-in-out both}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.checkmark__svg{width:56px;height:56px;border-radius:50%;display:block;stroke-width:3;stroke:var(--color-success);stroke-miterlimit:10;margin:0 auto 1rem}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:var(--color-success);fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .5s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes scan-line{0%{transform:translateY(0)}to{transform:translateY(98%)}}.scanning-line{position:absolute;left:5%;right:5%;top:0;height:3px;background:linear-gradient(to right,transparent,rgba(255,0,0,.8),transparent);box-shadow:0 0 10px #f00c;animation:scan-line 2.5s infinite alternate ease-in-out;border-radius:2px}.qr-box-outline{transition:border-color .3s}.barcode-scanner-box{position:relative;overflow:hidden;background-color:#111827}.barcode-scanner-line{position:absolute;left:10%;right:10%;top:0;height:3px;border-radius:2px;animation:scan-line 2.5s infinite alternate ease-in-out}.barcode-scanner-line.waiting{background:linear-gradient(to right,transparent,rgba(255,255,255,.9),transparent);box-shadow:0 0 10px #ffffffb3}.barcode-scanner-line.success{animation:none;top:50%;transform:translateY(-50%);background:linear-gradient(to right,transparent,rgba(74,222,128,.9),transparent);box-shadow:0 0 15px #4ade80cc;transition:all .3s ease-in-out}@keyframes camera-iris{0%{transform:scale(1)}50%{transform:scale(.3)}to{transform:scale(1)}}.camera-loader{width:80px;height:80px;border-radius:50%;background:#333;display:flex;align-items:center;justify-content:center;position:relative}.camera-loader:before{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:#111}.camera-loader-iris{width:40px;height:40px;border-radius:50%;background:var(--color-primary);z-index:1;animation:camera-iris 1.5s infinite ease-in-out}html,body,#app{height:100%;overflow:hidden}main{flex-grow:1;overflow-y:auto}.aspect-square-container{position:relative;width:100%;padding-top:100%;overflow:hidden}.aspect-square-content{position:absolute;top:0;left:0;width:100%;height:100%}.aspect-4-3-container{position:relative;width:100%;padding-top:75%;overflow:hidden}.aspect-4-3-content{position:absolute;top:0;left:0;width:100%;height:100%}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:0 1px 3px #0003}input:checked+.toggle-slider{background-color:var(--color-primary)}input:checked+.toggle-slider:before{transform:translate(20px)}input:disabled+.toggle-slider{cursor:not-allowed;opacity:.6}.segmented-control{display:inline-flex;padding:2px;border-radius:.5rem;background-color:var(--color-bg);border:1px solid var(--color-border)}.segmented-control button{padding:.25rem 1rem;border:none;background-color:transparent;color:var(--color-text-secondary);font-weight:600;border-radius:.375rem;cursor:pointer;transition:background-color .2s,color .2s}.segmented-control button.active{background-color:var(--color-card);color:var(--color-text-primary);box-shadow:0 1px 3px var(--color-shadow)}.segmented-radio-group{display:inline-flex;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:.5rem;padding:2px}.segmented-radio-group label{position:relative}.segmented-radio-group input{position:absolute;opacity:0;width:0;height:0}.segmented-radio-group span{display:block;padding:.25rem .75rem;border-radius:.375rem;font-size:.875rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.segmented-radio-group input:checked+span{background-color:var(--color-card);color:var(--color-text-primary);box-shadow:0 1px 2px var(--color-shadow)}.theme-btn{padding:.5rem;border:2px solid var(--color-border);border-radius:.5rem;cursor:pointer;transition:all .2s ease-in-out;background-color:var(--color-card);display:flex;flex-direction:column;gap:.5rem;height:100%}.theme-btn>span{font-size:.875rem;font-weight:600;text-align:center;color:var(--color-text-primary);transition:color .2s ease-in-out}.theme-btn:hover{border-color:var(--color-primary-hover)}.theme-btn.active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.theme-preview{width:100%;height:5rem;border-radius:.25rem;border:1px solid;overflow:hidden;display:flex;flex-direction:column;padding:.375rem;gap:.25rem;pointer-events:none}.theme-preview-header{height:.75rem;display:flex;align-items:center;gap:.25rem;padding:0 .25rem;border-radius:2px 2px 0 0;flex-shrink:0}.theme-preview-dot{width:.5rem;height:.5rem;border-radius:50%}.theme-preview-content{flex-grow:1;border-radius:2px;padding:.375rem;display:flex;flex-direction:column;justify-content:space-between}.theme-preview-line{height:.375rem;width:70%;border-radius:2px;margin-bottom:.375rem}.theme-preview-line.short{width:40%}.theme-preview-primary-bar{height:.75rem;width:50%;border-radius:2px;align-self:flex-end}.drum-picker-container{display:flex;justify-content:center;position:relative;height:210px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}.drum-picker-column{overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;scroll-snap-type:y mandatory}.drum-picker-column::-webkit-scrollbar{display:none}.drum-picker-column ul{list-style:none;padding:84px 0;margin:0}.drum-picker-column li{height:42px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;scroll-snap-align:center;color:var(--color-text-secondary);transition:color .2s,font-weight .2s;cursor:pointer}.drum-picker-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin-top:84px;margin-bottom:84px;box-sizing:border-box}