/* QR dialog */
 #qr-scanning {
     padding: 0 !important;
 }

 /* Prevent body scroll when dialog is open on mobile */


 #qr-scanner-container {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
     color: white;
     padding: 15px;
     border-radius: 10px;
 }

 #qr-scanner-container .scanner-wrapper {
     position: relative;
     width: 100%;
     max-width: 400px;
     margin: 0 auto 15px;
     border: 3px solid #4CAF50;
     border-radius: 15px;
     overflow: hidden;
     background: #000;
     box-shadow: 0 8px 32px rgba(76, 175, 80, 0.3);
 }

 #qr-scanner-container #video {
     width: 100%;
     height: 280px;
     object-fit: cover;
     display: block;
 }

 #qr-scanner-container #canvas {
     display: none;
 }

 #qr-scanner-container #detection-canvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 15;
 }

 #qr-scanner-container .overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 200px;
     height: 200px;
     border: 3px solid #4CAF50;
     border-radius: 20px;
     pointer-events: none;
     z-index: 10;
     animation: pulse 2s ease-in-out infinite;
 }

 @keyframes pulse {
     0%,
     100% {
         border-color: #4CAF50;
         box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
     }

     50% {
         border-color: #81C784;
         box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
     }
 }

 #qr-scanner-container .scan-line {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, transparent, #4CAF50, transparent);
     animation: scanMove 2s linear infinite;
 }

 @keyframes scanMove {
     0% {
         top: 20%;
     }

     100% {
         top: 80%;
     }
 }

 #qr-scanner-container .text-result-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 40%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
     display: flex;
     align-items: flex-end;
     justify-content: center;
     z-index: 15;
     padding: 15px;
 }

 #qr-scanner-container .text-result-content {
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     color: white;
     padding: 10px 15px;
     border-radius: 8px;
     text-align: center;
     max-width: 90%;
     word-break: break-all;
     font-size: 12px;
     line-height: 1.4;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }

 #qr-scanner-container .text-result-content.success {
     border-color: #4CAF50;
     background: rgba(76, 175, 80, 0.2);
     animation: resultSuccess 0.5s ease-out;
 }

 @keyframes resultSuccess {
     0% {
         transform: scale(0.8);
         opacity: 0;
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 #qr-scanner-container .controls {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     gap: 8px;
     margin-bottom: 15px;
 }

 #qr-scanner-container button {
     padding: 10px 15px;
     background: linear-gradient(135deg, #4CAF50, #45a049);
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 600;
     transition: all 0.3s;
     box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
 }

 #qr-scanner-container button:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
 }

 #qr-scanner-container button:disabled {
     background: #666;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 #qr-scanner-container #torch-btn {
     background: linear-gradient(135deg, #ff9800, #f57c00);
 }

 #qr-scanner-container #torch-btn:hover:not(:disabled) {
     box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
 }

 #qr-scanner-container #torch-btn.active {
     background: linear-gradient(135deg, #ffeb3b, #fbc02d);
     color: #000;
 }

 #qr-scanner-container .settings {
     display: block;
     margin-bottom: 15px;
     padding: 15px;
     background: rgba(42, 42, 42, 0.8);
     border-radius: 8px;
     backdrop-filter: blur(10px);
 }

 #qr-scanner-container .setting-item {
     background: rgba(255, 255, 255, 0.1);
     padding: 10px;
     border-radius: 6px;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 #qr-scanner-container .setting-item label {
     display: block;
     margin-bottom: 5px;
     font-size: 12px;
     font-weight: 600;
     color: #4CAF50;
 }

 #qr-scanner-container select {
     width: 100%;
     padding: 6px;
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     font-size: 12px;
 }


 #result-panel-container {
     background: white;
     color: black;
     padding: 0 15px;
     border-radius: 8px;
     margin-top: 10px;
 }

 #result-panel-container .badge {
     display: flex;
     align-items: center;
     background: #f0f0f0;
     border-radius: 6px;
     padding: 8px;
     margin-bottom: 10px;
 }

 #result-panel-container .badge-icon {
     background: #4CAF50;
     color: white;
     border-radius: 4px;
     padding: 4px 8px;
     margin-right: 10px;
     font-size: 12px;
 }

 #result-panel-container .scanapp-button {
     background: #4CAF50;
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 600;
     width: 100%;
     margin-top: 10px;
 }

 #result-panel-container .scanapp-button:hover {
     background: #45a049;
 }

 #scan-quick-action {
     background: #2196F3;
     color: white;
     padding: 10px;
     border-radius: 6px;
     cursor: pointer;
     text-align: center;
     margin-bottom: 10px;
 }

 #scan-quick-action:hover {
     background: #1976D2;
 }

 /* Mobile Responsive Design */
 @media only screen and (max-width: 768px) and (orientation: portrait) {

     #qr-scanner-container {
         padding: 10px;
         height: 100%;
         overflow-y: auto;
         background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
         color: white;
         border-radius: 0 0 8px 8px;
     }

     #qr-scanner-container .settings {
         grid-template-columns: 1fr;
         gap: 8px;
         margin-bottom: 10px;
         padding: 10px;
         background: rgba(42, 42, 42, 0.8) !important;
         border-radius: 8px;
         backdrop-filter: blur(10px);
     }

     #qr-scanner-container .setting-item {
         padding: 8px;
         background: rgba(255, 255, 255, 0.1) !important;
         border: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 6px;
     }

     #qr-scanner-container .setting-item label {
         font-size: 11px;
         margin-bottom: 4px;
         color: #4CAF50 !important;
         display: block;
         font-weight: 600;
     }

     #qr-scanner-container select {
         padding: 5px;
         font-size: 11px;
         background: rgba(255, 255, 255, 0.1) !important;
         color: white !important;
         border: 1px solid rgba(255, 255, 255, 0.3);
         border-radius: 4px;
         width: 100%;
     }

     #qr-scanner-container .scanner-wrapper {
         max-width: 100%;
         margin: 0 auto 10px;
         border: 2px solid #4CAF50;
         border-radius: 15px;
         overflow: hidden;
         background: #000;
         box-shadow: 0 8px 32px rgba(76, 175, 80, 0.3);
         position: relative;
     }

     #qr-scanner-container #video {
         height: 250px;
         width: 100%;
         object-fit: cover;
         display: block;
     }

     #qr-scanner-container .overlay {
         width: 180px;
         height: 180px;
         border: 2px solid #4CAF50;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         border-radius: 20px;
         pointer-events: none;
         z-index: 10;
         animation: pulse 2s ease-in-out infinite;
     }

     #qr-scanner-container .text-result-overlay {
         height: 35%;
         padding: 10px;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
         display: flex;
         align-items: flex-end;
         justify-content: center;
         z-index: 15;
     }

     #qr-scanner-container .text-result-content {
         padding: 8px 12px;
         font-size: 11px;
         border-radius: 6px;
         background: rgba(0, 0, 0, 0.7) !important;
         backdrop-filter: blur(10px);
         color: white !important;
         text-align: center;
         max-width: 90%;
         word-break: break-all;
         line-height: 1.4;
         border: 2px solid transparent;
         transition: all 0.3s ease;
     }

     #qr-scanner-container .controls {
         grid-template-columns: repeat(2, 1fr);
         gap: 6px;
         margin-bottom: 10px;
         display: grid;
     }

     #qr-scanner-container button {
         padding: 8px 10px;
         font-size: 12px;
         border-radius: 5px;
         background: linear-gradient(135deg, #4CAF50, #45a049) !important;
         color: white !important;
         border: none;
         cursor: pointer;
         font-weight: 600;
         transition: all 0.3s;
         box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
     }

     #qr-scanner-container button:disabled {
         background: #666 !important;
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }

     #qr-scanner-container #torch-btn {
         background: linear-gradient(135deg, #ff9800, #f57c00) !important;
     }

     #result-panel-container {
         padding: 0 10px;
         margin-top: 5px;
         background: white !important;
         color: black !important;
         border-radius: 8px;
     }

     #result-panel-container h4 {
         font-size: 16px;
         margin-bottom: 8px;
     }

     #result-panel-container .badge {
         padding: 6px;
         margin-bottom: 8px;
     }

     #result-panel-container .badge-icon {
         padding: 3px 6px;
         margin-right: 8px;
         font-size: 11px;
     }

     #result-panel-container .badge-text {
         font-size: 12px;
     }

     #result-panel-container .scanapp-button {
         padding: 8px 16px;
         font-size: 14px;
         margin-top: 8px;
     }

     #scan-quick-action {
         padding: 8px;
         margin-bottom: 8px;
         font-size: 12px;
     }

     #scan-result-parsed {
         font-size: 12px;
         word-break: break-all;
         max-height: 60px;
         overflow-y: auto;
     }
 }

 @media only screen and (max-width: 480px) and (orientation: portrait) {

     #qr-scanner-container {
         padding: 8px;
         background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
         color: white !important;
         height: 100%;
         overflow-y: auto;
     }

     #qr-scanner-container .settings {
         padding: 8px;
         margin-bottom: 8px;
         background: rgba(42, 42, 42, 0.8) !important;
     }

     #qr-scanner-container .setting-item {
         padding: 6px;
         background: rgba(255, 255, 255, 0.1) !important;
     }

     #qr-scanner-container #video {
         height: 220px !important;
     }

     #qr-scanner-container .overlay {
         width: 120px !important;
         height: 120px !important;
     }

     #qr-scanner-container .controls {
         grid-template-columns: 1fr 1fr;
         gap: 5px;
     }

     #qr-scanner-container button {
         padding: 6px 8px;
         font-size: 11px;
         background: linear-gradient(135deg, #4CAF50, #45a049) !important;
         color: white !important;
     }

     #result-panel-container {
         padding: 8px;
         background: white !important;
         color: black !important;
     }

     #result-panel-container h4 {
         font-size: 14px;
     }
 }

 /* Force styles for all mobile devices */
 @media only screen and (max-width: 768px) {
     #qr-scanning .ui-dialog-content {
         background: transparent !important;
     }

     #qr-scanner-container {
         background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
         color: white !important;
     }

     #qr-scanner-container * {
         color: inherit !important;
     }

     #qr-scanner-container .setting-item label {
         color: #4CAF50 !important;
     }

     #qr-scanner-container select {
         background: rgba(255, 255, 255, 0.1) !important;
         color: white !important;
     }

     #qr-scanner-container button {
         background: linear-gradient(135deg, #4CAF50, #45a049) !important;
         color: white !important;
     }

     #qr-scanner-container #torch-btn {
         background: linear-gradient(135deg, #ff9800, #f57c00) !important;
     }

     #qr-scanner-container .text-result-content {
         background: rgba(0, 0, 0, 0.7) !important;
         color: white !important;
     }
 }

 /* Landscape mode adjustments for mobile */
 @media only screen and (max-height: 500px) and (orientation: landscape) {


     #qr-scanner-container {
         display: flex;
         flex-direction: row;
         gap: 10px;
     }

     #qr-scanner-container .scanner-wrapper {
         flex: 1;
         margin: 0;
     }

     #qr-scanner-container #video {
         height: 180px;
     }

     .scanner-controls-panel {
         flex: 0 0 200px;
         display: flex;
         flex-direction: column;
     }

     #qr-scanner-container .settings {
         margin-bottom: 8px;
     }

     #qr-scanner-container .controls {
         grid-template-columns: 1fr;
         gap: 4px;
     }

     #qr-scanner-container button {
         padding: 6px;
         font-size: 10px;
     }
 }

 .permission-dialog ul {
     list-style: none;
     padding-left: 0;
 }

 .permission-dialog li {
     margin: 8px 0;
     padding-left: 20px;
     position: relative;
 }

 .permission-dialog li:before {
     content: "▶";
     color: #f44336;
     position: absolute;
     left: 0;
 }
/* QR dialog */