@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--neon-blue: var(--theme-primary, #00d2ff);--neon-pink: var(--theme-secondary, #ff007f);--neon-purple: var(--theme-accent, #7f00ff);--neon-red: #ff4444;--neon-yellow: #f0e130;--bg-dark: #050508;--bg-card: #0c0c14;--text-primary: #ffffff;--text-secondary: #b0b0b0;--accent-glow: var(--theme-pill-active-glow, 0 0 15px var(--theme-primary, #00d2ff));--purple-glow: 0 0 15px var(--theme-secondary, #ff007f);--glass: rgba(255, 255, 255, .03);--border-glass: rgba(255, 255, 255, .1);--start-fade-duration: .8s}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text!important;user-select:text!important;cursor:text!important;pointer-events:all!important}body{font-family:Outfit,sans-serif;background-color:#12121e!important;color:var(--text-primary);height:100vh;overflow:hidden;display:flex;flex-direction:column}#app-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background-size:cover;background-position:center;background-repeat:no-repeat;transition:background-image .5s ease-in-out;pointer-events:none}#app-bg-video{position:absolute;top:50%;left:50%;width:100vw;height:100vh;object-fit:cover;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}.category-edit-input{background:#000;border:1px solid var(--neon-blue);color:#fff;padding:5px 10px;border-radius:5px;font-size:1rem;width:100%}button{cursor:pointer;border:none;outline:none;background:none;font-family:inherit;transition:all .3s ease}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--neon-blue);border-radius:10px}.header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent)}.logo{font-size:2.5rem;font-weight:700;text-transform:uppercase;letter-spacing:5px;background-image:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 5px rgba(0,210,255,.5))}.icon-btn{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:2px solid var(--neon-blue);color:var(--neon-blue);box-shadow:inset 0 0 5px var(--neon-blue),0 0 5px var(--neon-blue);font-size:1.5rem}.icon-btn:hover{background:var(--neon-blue);color:var(--bg-dark);box-shadow:0 0 20px var(--neon-blue)}.category-container{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px 40px;background:#0006;border:1px solid var(--border-glass);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (orientation: portrait){.header{padding:10px 20px}.logo{font-size:1.8rem}.icon-btn{width:36px;height:36px}.icon-btn svg{width:18px;height:18px}.category-container{gap:6px;padding:6px 20px}.category-btn{padding:6px 12px;font-size:.75rem;gap:6px}.category-btn svg{width:14px;height:14px}}.category-btn{padding:8px 20px;border-radius:20px;border:1px solid var(--border-glass);background:var(--glass);color:var(--text-secondary);font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.category-btn svg{width:16px;height:16px}.category-btn.active{border-color:var(--neon-blue);color:var(--text-primary);background: var(--theme-pill-active-bg, rgba(0, 210, 255, 0.2)); box-shadow: var(--theme-pill-active-glow, 0 0 10px var(--theme-primary, #00d2ff))4d}.home-screen{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:20px 40px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:40px}@media (orientation: portrait){.grid{grid-template-columns:repeat(3,1fr)}}.card{position:relative;background:var(--bg-card);border-radius:20px;padding:10px;border:2px solid rgba(255,255,255,.1);transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;background-clip:padding-box;box-shadow:0 10px 30px #00000080}.card.neon-cyan{border-color:var(--neon-blue);box-shadow:0 0 20px #00d2ff33,inset 0 0 10px #00d2ff1a}.card.neon-pink{border-color:var(--neon-pink);box-shadow:0 0 20px #ff007f33,inset 0 0 10px #ff007f1a}.card.neon-purple{border-color:var(--neon-purple);box-shadow:0 0 20px #7f00ff33,inset 0 0 10px #7f00ff1a}.card.neon-red{border-color:var(--neon-red);box-shadow:0 0 20px #f443,inset 0 0 10px #ff44441a}.card:hover{transform:translateY(-10px) scale(1.02);z-index:10}.card.neon-cyan:hover{box-shadow:0 0 40px #00d2ff99,inset 0 0 20px #00d2ff4d}.card.neon-pink:hover{box-shadow:0 0 40px #ff007f99,inset 0 0 20px #ff007f4d}.card.neon-purple:hover{box-shadow:0 0 40px #7f00ff99,inset 0 0 20px #7f00ff4d}.card.neon-red:hover{box-shadow:0 0 40px #f449,inset 0 0 20px #ff44444d}.card-img-container{width:100%;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#000;position:relative}.card-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.card:hover .card-img{transform:scale(1.1)}.card-info{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:5px}.card-badge{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 15px;width:100%;text-align:center;position:relative;overflow:hidden}.card-badge:after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--neon-blue),transparent);opacity:.5}.neon-pink .card-badge:after{background:var(--neon-pink)}.neon-purple .card-badge:after{background:var(--neon-purple)}.neon-red .card-badge:after{background:var(--neon-red)}.card-title{font-size:1.1rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:2px;margin:0;text-shadow:0 0 10px rgba(255,255,255,.3)}.card-tags{font-size:.65rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:1px}@media (orientation: portrait){.card-title{font-size:clamp(.55rem,3vw,.85rem);text-align:center;line-height:1.2;word-wrap:break-word;white-space:normal}.card-tags{font-size:clamp(.45rem,2.2vw,.6rem);text-align:center;white-space:normal}}.capture-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-dark);display:flex;flex-direction:column;z-index:10;overflow:hidden}.capture-screen .header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 50px;z-index:100}@media (orientation: portrait){.header{padding:0 20px;top:20px}}.camera-container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;padding:0;overflow:hidden}.camera-view{width:100%;height:100%;background:#000;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}.capture-guide{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);aspect-ratio:2/3;border:4px solid var(--neon-blue);box-shadow:0 0 30px var(--neon-blue),inset 0 0 30px var(--neon-blue);pointer-events:none;z-index:5}.capture-guide:before,.capture-guide:after{content:"";position:absolute;top:0;bottom:0;background:#0009;width:100vw;pointer-events:none}.capture-guide:before{right:100%}.capture-guide:after{left:100%}@keyframes neon-gradient-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.camera-view:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:4px solid var(--neon-blue);border-radius:20px;pointer-events:none;z-index:10;animation:border-color-pulse 6s linear infinite;box-shadow:0 0 30px #00d2ff66,0 0 60px #ff007f33,inset 0 0 20px #00ff7f4d}@keyframes border-color-pulse{0%{border-color:#ff007f}33%{border-color: var(--theme-primary, #00d2ff)}66%{border-color:#00ff7f}to{border-color:#ff007f}}@media (orientation: landscape){.camera-view{width:auto;height:auto;aspect-ratio:16/9;max-width:92vw;max-height:85vh;border-radius:20px;box-shadow:0 10px 30px #00000080}.capture-guide{display:none!important}}video{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}video.mirrored{transform:scaleX(-1)}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;justify-content:center;align-items:center;background:#0006;font-size:12rem;font-weight:800;color:var(--text-primary);text-shadow:0 0 50px var(--neon-blue);z-index:30}.breathing-text{position:absolute;bottom:10%;width:100%;text-align:center;font-size:3rem;font-weight:700;color:var(--text-primary);text-shadow:0 0 20px var(--neon-blue);animation:breathe 2s infinite ease-in-out;display:none}@keyframes breathe{0%,to{opacity:.3;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}.capture-controls{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;background:#000c;padding:30px 20px;border-radius:40px;border:1px solid var(--border-glass);z-index:20;box-shadow:0 0 20px #00000080}.btn-primary{padding:15px 40px;border-radius:50px;background:var(--neon-blue);color:var(--bg-dark);font-weight:700;font-size:1.2rem;box-shadow:0 0 20px var(--neon-blue)}.btn-secondary{padding:15px 40px;border-radius:50px;border:2px solid var(--neon-purple);color:var(--neon-purple);font-weight:700;font-size:1.2rem;box-shadow:inset 0 0 10px var(--neon-purple),0 0 15px var(--neon-purple)}.config-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:none;justify-content:center;align-items:center;z-index:9999}.config-container{width:90vw;height:85vh;background:#12121e;border-radius:30px;border:1px solid var(--border-glass);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 50px #00000080}.config-header{padding:20px 30px;border-bottom:1px solid var(--border-glass);display:flex;justify-content:space-between;align-items:center}.config-tabs{display:flex;gap:10px;padding:10px 30px;background:#1a1a2e;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.config-tabs::-webkit-scrollbar{height:4px}.config-tabs::-webkit-scrollbar-track{background:#0003}.config-tabs::-webkit-scrollbar-thumb{background:var(--neon-blue);border-radius:2px}.tab-btn{padding:10px 20px;color:var(--text-secondary);font-weight:600;border-radius:8px;flex-shrink:0}.tab-btn.active{background:var(--glass);color:var(--text-primary);border-bottom:2px solid var(--neon-blue)}.config-body{flex:1;padding:30px;overflow-y:auto}@media (orientation: portrait){.config-container{width:95vw;height:95vh}.config-tabs{flex-wrap:wrap;justify-content:center;padding:10px}.tab-btn{padding:8px 12px;font-size:.85rem;flex-grow:1;text-align:center}.config-body{padding:15px}}.hidden{display:none!important}.no-drag{-webkit-app-region:no-drag!important}#global-neon-border{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;border:none;box-shadow:inset 0 0 40px #00d2ff40,inset 0 0 15px #00d2ff33;animation:border-breathe 5s infinite ease-in-out}@keyframes border-breathe{0%,to{box-shadow:inset 0 0 30px #00d2ff33,inset 0 0 10px #00d2ff26}50%{box-shadow:inset 0 0 60px #7f00ff40,inset 0 0 20px #7f00ff33}}#start-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;opacity:1;transition:opacity .8s cubic-bezier(.4,0,.2,1)}#start-screen.fading{opacity:0;pointer-events:none}#start-screen-img,#start-screen-video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;right:0;bottom:0;left:0}#processing-bg-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}.start-text{position:relative;z-index:10;font-size:3rem;font-weight:800;color:#fff;text-shadow:0 0 20px rgba(0,0,0,.8),0 0 10px var(--neon-blue);letter-spacing:5px;animation:pulse-text 2s infinite ease-in-out;text-align:center;width:90%}@media (orientation: portrait){.start-text{font-size:2rem}}@keyframes pulse-text{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.05);opacity:1}}.home-screen{background:#05050880;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.capture-screen,.processing-screen,.result-screen{background:#05050880}.config-modal{background:#000000f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.config-container{background:#0c0c14}.processing-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#05050880;z-index:200;display:flex;flex-direction:column;justify-content:center;align-items:center}.processing-screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;z-index:2;pointer-events:none}.processing-screen>*{position:relative;z-index:10}.pulse-neon{width:140px;height:140px;border-radius:50%;border:4px solid rgba(0,210,255,.1);border-top-color:var(--neon-blue);box-shadow:0 0 20px #00d2ff33;animation:neon-spin 1.2s cubic-bezier(.5,0,.5,1) infinite;display:flex;justify-content:center;align-items:center;margin-bottom:40px;position:relative}.pulse-neon:before{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:2px solid rgba(127,0,255,.2);border-bottom-color:var(--neon-purple);animation:neon-spin 2s linear infinite reverse}.pulse-neon.custom-spinner{border:none!important;box-shadow:none!important;animation:none!important;width:160px!important;height:160px!important}.pulse-neon.custom-spinner:before{display:none!important}#processing-spinner-img{width:160px!important;height:160px!important;object-fit:contain!important}.processing-text{font-size:2rem;font-weight:700;color:var(--text-primary);text-shadow:0 0 15px var(--neon-purple);text-align:center;max-width:600px;padding:0 20px;white-space:normal;word-wrap:break-word;line-height:1.4;z-index:3}@media (orientation: portrait){.processing-text{font-size:1.25rem;max-width:90vw;padding:0 10px;line-height:1.3}}.result-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#05050880;z-index:150;display:flex;flex-direction:column}.result-main{flex:1;display:flex;flex-direction:row;width:100%;overflow:hidden}.result-image-container{flex:3;display:flex;justify-content:center;align-items:center;padding:40px}.result-image{max-height:85vh;aspect-ratio:2/3;border-radius:20px;border:4px solid var(--neon-purple);box-shadow:0 0 30px #7f00ff4d;object-fit:contain;image-rendering:-webkit-optimize-contrast}.result-screen .header{justify-content:center}.result-controls{flex:1.2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;background:#0a0a1299;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:30px;border-left:1px solid var(--border-glass);min-width:320px}.result-controls button{width:100%;min-height:65px;font-size:1rem;letter-spacing:1px}@media (orientation: portrait){.result-main{flex-direction:column;position:relative}.result-image-container{padding:20px 20px 220px;flex:1}.result-image{max-height:65vh;width:auto}.result-controls{position:absolute;bottom:30px;left:50%;transform:translate(-50%);width:90%;max-width:440px;min-width:unset;background:#0a0a12e6;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border:1px solid var(--border-glass);border-radius:24px;padding:20px;box-shadow:0 15px 40px #0009;z-index:10;gap:15px}.result-controls button{min-height:60px}.qr-section{padding:10px;background:#ffffff0d;border-radius:15px}}@keyframes toast-in{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}.capture-close-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.capture-close-btn:hover{background:#ff44444d;border-color:#f44;box-shadow:0 0 15px #f446}.qr-section{display:flex;flex-direction:column;align-items:center;gap:10px;background:#0006;padding:15px;border-radius:20px;border:1px solid var(--neon-blue);box-shadow:0 0 15px var(--neon-blue);animation:qr-in .5s cubic-bezier(.175,.885,.32,1.275);margin-top:10px}@keyframes qr-in{0%{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.neon-qr{width:140px;height:140px;background:#fff;padding:5px;border-radius:10px;box-shadow:0 0 10px #00d2ff80}.qr-text{font-size:.7rem;font-weight:700;color:var(--neon-blue);text-shadow:0 0 5px var(--neon-blue);letter-spacing:1px}.qr-loading-placeholder,.qr-result-area{display:flex;flex-direction:column;align-items:center;gap:15px}.neon-spinner{width:100px;height:100px;border:4px solid rgba(0,210,255,.1);border-top-color:var(--neon-blue);border-radius:50%;animation:neon-spin 1s linear infinite;box-shadow:0 0 10px var(--neon-blue)}@keyframes neon-spin{to{transform:rotate(360deg)}}.ready .qr-loading-placeholder{display:none}.ready .qr-result-area{display:flex;animation:qr-in .5s cubic-bezier(.175,.885,.32,1.275)}.overlay-editor-grid{display:grid;grid-template-columns:1fr 320px;height:100%;gap:0;background:#0c0c14;padding:0;overflow:hidden}@media (max-width: 1000px){.overlay-editor-grid{grid-template-columns:1fr;grid-template-rows:1fr 350px;overflow-y:auto}.properties-panel{border-left:none!important;border-top:1px solid var(--border-glass)}.canvas-area{padding:20px!important}.overlay-canvas-container{max-width:90vw;height:auto!important;aspect-ratio:2/3}}.editor-sidebar{background:#1a1a2e;padding:20px;display:flex;flex-direction:column;gap:15px;border-right:1px solid var(--border-glass)}.editor-sidebar h4{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.canvas-area{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:#050508;position:relative;padding:40px;overflow:auto}.overlay-canvas-container{background:#222;background-image:linear-gradient(45deg,#1a1a1a 25%,transparent 25%),linear-gradient(-45deg,#1a1a1a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a1a 75%),linear-gradient(-45deg,transparent 75%,#1a1a1a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;box-shadow:0 0 50px #00000080;position:relative;overflow:hidden;width:500px;height:750px;flex-shrink:0;touch-action:none}.canvas-item{position:absolute;cursor:move;outline:2px solid transparent;transition:outline .2s;touch-action:none}.canvas-item.selected{outline:2px solid var(--neon-blue);box-shadow:0 0 15px var(--neon-blue);z-index:1000!important}.resize-handle{position:absolute;bottom:-10px;right:-10px;width:24px;height:24px;background:var(--neon-blue);border:2px solid #fff;border-radius:50%;cursor:nwse-resize;z-index:100;touch-action:none;box-shadow:0 2px 5px #00000080}.resize-handle:active{transform:scale(1.2)}.properties-panel{background:#1a1a2e;padding:20px;display:flex;flex-direction:column;gap:15px;border-left:1px solid var(--border-glass);overflow-y:auto}.prop-group{display:flex;flex-direction:column;gap:8px}.prop-group label{font-size:.75rem;color:#888}.prop-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.prop-input{width:100%;padding:8px;background:#222;border:1px solid #444;color:#fff;border-radius:6px;font-size:.85rem}.layers-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:5px}.layer-item{display:flex;align-items:center;gap:10px;padding:10px;background:#111;border:1px solid #333;border-radius:8px;cursor:pointer;font-size:.85rem}.layer-item.active{border-color:var(--neon-blue);background:#00d2ff1a}.layer-item span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-controls{display:flex;gap:5px}.layer-btn{padding:4px;color:#666}.layer-btn:hover{color:var(--neon-blue)}.sms-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#050508f2;z-index:1000;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sms-container{background:var(--bg-card);border:2px solid var(--neon-blue);box-shadow:0 0 50px #00d2ff4d;border-radius:30px;padding:40px;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:30px}.sms-title{font-size:1.8rem;font-weight:700;color:var(--text-primary);text-shadow:0 0 10px var(--neon-blue);text-transform:uppercase;letter-spacing:2px}.sms-input-wrapper{width:100%;position:relative}.sms-input{width:100%;background:#000;border:2px solid var(--border-glass);border-radius:15px;padding:15px;font-size:2.2rem;color:#fff;text-align:center;font-family:Outfit,sans-serif;letter-spacing:2px;transition:border-color .3s ease}.sms-input:focus{border-color:var(--neon-blue);box-shadow:0 0 15px #00d2ff4d;outline:none}.sms-keyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}.key{background:var(--glass);border:1px solid var(--border-glass);border-radius:15px;padding:18px;font-size:1.6rem;font-weight:700;color:var(--text-primary);display:flex;justify-content:center;align-items:center;transition:all .2s ease;cursor:pointer}.key:active{background:var(--neon-blue);color:var(--bg-dark);transform:scale(.95);box-shadow:0 0 20px var(--neon-blue)}.key.backspace{color:var(--neon-red);border-color:#ff44444d}.sms-footer{display:flex;gap:20px;width:100%}.sms-footer button{flex:1;padding:18px;font-size:1.1rem;border-radius:15px;text-transform:uppercase;letter-spacing:2px;font-weight:600;cursor:pointer}.btn-skip{border:2px solid var(--text-secondary);color:var(--text-secondary)}.btn-skip:hover{background:#ffffff0d}.pin-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-glass);background:var(--glass);transition:all .3s ease}.pin-dot.filled{background:var(--neon-blue);border-color:var(--neon-blue);box-shadow:0 0 15px var(--neon-blue);transform:scale(1.1)}#booth-keypad .key{aspect-ratio:1;border-radius:50%;border:1px solid var(--border-glass);background:var(--bg-card);color:var(--text-primary);font-size:1.8rem;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}#booth-keypad .key:active{background:var(--glass);transform:scale(.95);border-color:var(--neon-blue);box-shadow:0 0 15px #00d2ff4d}.virtual-keyboard{margin-top:25px;display:flex;flex-direction:column;gap:10px;background:#0000004d;padding:15px;border-radius:15px;border:1px solid #222;-webkit-user-select:none;user-select:none}.kb-row{display:flex;justify-content:center;gap:8px}.kb-key{min-width:45px;height:55px;background:#1a1a2e;border:1px solid #333;color:#ccc;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease;flex:1;max-width:60px}.kb-key:active{background:var(--neon-blue);color:#000;transform:scale(.95);box-shadow:0 0 15px var(--neon-blue)}.kb-key.wide{max-width:100px;flex:2}.kb-key.extra-wide{max-width:150px;flex:3}.kb-key.special{background:#252545;color:#fff;border-color:#444}.kb-key.caps-active{background:var(--neon-purple);color:#fff;border-color:var(--neon-purple);box-shadow:0 0 10px var(--neon-purple)}.kb-key.enter-key{background:var(--neon-blue);color:#000;border-color:var(--neon-blue)}@media (orientation: portrait){.virtual-keyboard{padding:10px;gap:5px}.kb-row{gap:4px}.kb-key{min-width:25px;height:45px;font-size:.9rem;padding:0 2px}.kb-key.wide{max-width:50px}.kb-key.extra-wide{max-width:75px}}.activation-container{animation:activation-in .8s cubic-bezier(.16,1,.3,1)}@keyframes activation-in{0%{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}#serial-key-input:focus{border-color:var(--neon-blue)!important;box-shadow:0 0 15px #00d2ff4d}.config-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.05)}@media (orientation: portrait){.config-row{flex-direction:column;align-items:stretch;gap:10px}.config-row label{margin-bottom:5px}}.config-row:last-child{border-bottom:none}.settings-section{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:15px;padding:20px;margin-bottom:25px}#copy-hwid-btn:hover{color:var(--neon-pink)!important;transform:scale(1.2)}#copy-hwid-btn{transition:all .2s ease}.consent-container{background:#141423f2;border:1px solid var(--neon-blue);border-radius:24px;width:90%;max-width:800px;height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 40px #00d2ff26;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.consent-header{padding:25px;border-bottom:1px solid rgba(0,210,255,.2);text-align:center}.consent-header h2{margin:0;color:var(--neon-blue);font-size:1.8rem;text-transform:uppercase;letter-spacing:2px}.consent-body{flex:1;overflow-y:auto;padding:30px;scrollbar-width:thin;scrollbar-color:var(--neon-blue) rgba(0,0,0,.2)}.consent-body::-webkit-scrollbar{width:6px}.consent-body::-webkit-scrollbar-track{background:#0003}.consent-body::-webkit-scrollbar-thumb{background:var(--neon-blue);border-radius:10px}.consent-text-scroll h3{color:var(--neon-pink);margin-top:25px;font-size:1.1rem;text-transform:uppercase}.consent-text-scroll p,.consent-text-scroll li{color:#ccc;line-height:1.6;font-size:.95rem;margin-bottom:12px}.consent-text-scroll ul{padding-left:20px}.consent-footer{padding:25px;border-top:1px solid rgba(0,210,255,.2);background:#0a0a14cc}.privacy-note{font-size:.85rem;color:var(--text-secondary);margin-bottom:20px;text-align:center;font-style:italic;line-height:1.4}.consent-buttons{display:flex;gap:20px}.consent-buttons button{flex:1;height:55px;font-size:1.1rem;font-weight:700}@media (orientation: portrait){.capture-screen .camera-view{width:auto;height:auto;aspect-ratio:9/16;max-width:92vw;max-height:70vh;border-radius:20px;box-shadow:0 10px 30px #00000080;position:relative}.capture-screen .capture-guide{display:none!important}.capture-screen .capture-controls{position:absolute;bottom:5vh;left:50%;right:auto;top:auto;transform:translate(-50%);display:flex;flex-direction:row!important;justify-content:center;align-items:center;gap:20px;background:#000c;padding:20px 40px;border-radius:30px;border:1px solid var(--border-glass);z-index:20;box-shadow:0 0 20px #00000080;width:90%;max-width:500px}.capture-screen #post-capture-controls{flex-direction:row!important;gap:20px!important}.capture-screen .capture-controls button,.capture-screen #post-capture-controls button{width:auto;flex:1;min-width:140px;padding:12px 25px;font-size:1rem}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}to{transform:scale(1);opacity:1}}.prompt-list-panel{width:320px;border-right:1px solid #333;overflow-y:auto;flex-shrink:0}.prompt-editor-panel{flex:1;padding:20px;overflow-y:auto}@media (orientation: landscape) and (max-height: 500px){.config-header{padding:5px 15px}.config-header h2{font-size:1.2rem}.config-tabs{padding:5px 15px}.tab-btn{padding:5px 10px;font-size:.8rem}.config-body{padding:10px}.prompt-list-panel{width:35vw;min-width:150px}.prompt-editor-panel{padding:10px}}




/* ======== NEON THEME REDESIGN FOR SETTINGS V2 ======== */

/* 1. The Main Modal Container */
.config-container {
    background: rgba(26,26,46,0.7) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    box-shadow: 0 0 40px rgba(0,210,255,0.25) !important;
    border: 1px solid var(--neon-blue) !important;
    border-radius: 25px !important;
}

/* 2. The Header */
.config-header {
    border-bottom: 1px solid rgba(0,210,255,0.3) !important;
    background: transparent !important;
}
.config-header h2 {
    color: var(--neon-blue) !important;
    text-shadow: 0 0 15px rgba(0,210,255,0.5) !important;
    letter-spacing: 2px !important;
}

/* 3. The Tabs Bar */
/* Tab bar container styling handled by universal responsive engine */

/* 4. The Content Body */
.config-body {
    background: transparent !important;
}

/* 5. The injected settings pane inside the body */
.settings-pane {
    background: transparent !important; /* Let the container shine through */
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 10px !important;
    margin: 0 !important;
}

/* Headers inside Settings */
.settings-pane h3 {
    color: var(--neon-blue) !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.4) !important;
    font-size: 1.4rem !important;
    margin-bottom: 20px !important;
    letter-spacing: 1px !important;
}

.settings-pane h4 {
    color: var(--neon-pink) !important;
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.4) !important;
}

/* Form Inputs and Dropdowns */
.settings-pane input[type="text"],
.settings-pane input[type="number"],
.settings-pane input[type="password"],
.settings-pane select,
.config-container input[type="text"],
.config-container select {
    background: rgba(0,0,0,0.6) !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    color: white !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    font-family: 'Inter', sans-serif !important;
}

/* Focus States for Inputs */
.settings-pane input[type="text"]:focus,
.settings-pane input[type="number"]:focus,
.settings-pane input[type="password"]:focus,
.settings-pane select:focus,
.config-container input[type="text"]:focus,
.config-container select:focus {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.4) !important;
    background: rgba(0,0,0,0.8) !important;
}

/* Toggle Checkboxes */
.settings-pane input[type="checkbox"] {
    accent-color: var(--neon-pink) !important;
    transform: scale(1.2) !important;
    cursor: pointer !important;
}

/* Primary Buttons */
.settings-pane .btn-primary, 
.settings-pane button[style*="orange"],
.config-container .btn-primary {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)) !important;
    border: none !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.4) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.settings-pane .btn-primary:hover,
.settings-pane button[style*="orange"]:hover,
.config-container .btn-primary:hover {
    box-shadow: var(--theme-cta-glow, 0 0 25px var(--theme-primary, rgba(0, 210, 255, 0.4))) !important;
    transform: translateY(-3px) !important;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple)) !important;
}

/* Status Text / Labels */
.settings-pane label,
.config-container label {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}


/* --- ABSOLUTE UI OVERRIDES --- */
#config-screen .config-container {
  background: #08080c !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 210, 255, 0.3) !important;
  box-shadow: 0 0 40px rgba(0, 210, 255, 0.1) !important;
}
#config-screen .config-header {
  padding: 25px 30px 15px 30px !important;
  border-bottom: 1px solid rgba(0, 210, 255, 0.1) !important;
}
#config-screen .config-header h2 {
  color: var(--neon-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 1.5rem !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.4) !important;
}
#config-screen .config-tabs {
  padding: 15px 30px 0 30px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
}
/* Tab button styles handled by master responsive design engine */
#config-screen .config-body {
  background: transparent !important;
  padding: 30px !important;
}
/* Inputs */
#config-screen input[type="text"], 
#config-screen input[type="password"], 
#config-screen input[type="number"], 
#config-screen select, 
#config-screen textarea {
  background: #0a0a10 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: white !important;
  padding: 12px 15px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.3s ease !important;
}
#config-screen input:focus, 
#config-screen select:focus, 
#config-screen textarea:focus {
  border-color: var(--neon-blue) !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.2) !important;
  outline: none !important;
}


/* Buttons */
.btn-primary, .btn-magenta {
  background: linear-gradient(90deg, #2859c5 0%, #5237c4 50%, #762596 100%) !important;
  color: white !important;
  border: 1px solid #000 !important; /* Sharp edge */
  border-radius: 6px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.btn-primary:hover, .btn-magenta:hover {
  background: var(--theme-cta-bg, linear-gradient(90deg, #00d2ff 0%, #7828ff 50%, #e024c3 100%)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
.btn-secondary, .btn-outline-purple {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #a485ff !important;
  border: 1px solid rgba(164, 133, 255, 0.4) !important;
  border-radius: 6px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.btn-secondary:hover, .btn-outline-purple:hover {
  background: rgba(164, 133, 255, 0.1) !important;
  border-color: #a485ff !important;
  color: #fff !important;
}


/* ======== ULTIMATE BLUE BUTTON OVERRIDE ======== */
.settings-pane .btn-primary, 
.settings-pane button[style*="orange"],
.config-container .btn-primary,
.btn-primary, .btn-magenta, #save-exit-pass-btn, #save-config-btn {
  background: linear-gradient(90deg, #2859c5 0%, #5237c4 50%, #762596 100%) !important;
  color: white !important;
  border: 1px solid rgba(0,0,0,0.8) !important; 
  border-radius: 6px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.settings-pane .btn-primary:hover, 
.settings-pane button[style*="orange"]:hover,
.config-container .btn-primary:hover,
.btn-primary:hover, .btn-magenta:hover, #save-exit-pass-btn:hover, #save-config-btn:hover {
  background: var(--theme-cta-bg, linear-gradient(90deg, #00d2ff 0%, #7828ff 50%, #e024c3 100%)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(0px) !important;
}


/* ======== WHITE SPACE FIX ======== */
.btn-primary, .btn-secondary, .btn-magenta, .btn-outline-purple, .config-modal button:not(.icon-btn) {
    white-space: nowrap !important;
}


/* ======== INPUT GRADIENT FIX ======== */
.settings-pane input[type="checkbox"],
.settings-pane input[type="radio"],
.config-container input[type="checkbox"],
.config-container input[type="radio"] {
    accent-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle !important;
}

.settings-pane input[type="checkbox"]:hover,
.settings-pane input[type="radio"]:hover,
.config-container input[type="checkbox"]:hover,
.config-container input[type="radio"]:hover {
    border-color: var(--theme-primary, #00d2ff) !important; box-shadow: 0 0 10px var(--theme-pill-border, rgba(0, 210, 255, 0.4)) !important;
}

.settings-pane input[type="checkbox"]:checked,
.settings-pane input[type="radio"]:checked,
.config-container input[type="checkbox"]:checked,
.config-container input[type="radio"]:checked {
    background: linear-gradient(135deg, #2859c5 0%, #762596 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(118, 37, 150, 0.5) !important;
}

.settings-pane input[type="checkbox"]:checked::after,
.config-container input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 2px;
    width: 5px;
    height: 11px;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg);
}

.settings-pane input[type="radio"]:checked::after,
.config-container input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white !important;
}

/* Overriding any specific inline accent colors or previous pink overrides */
* {
    --neon-pink: #762596 !important; /* Hijack the variable just in case */
}

/* Range Sliders */
input[type="range"] {
    accent-color: #5237c4 !important;
}


/* ======== SIMPLE OUTLINE BUTTON FIX ======== */
.btn-secondary, 
.btn-outline-purple, 
.settings-pane .btn-secondary, 
.settings-pane .btn-outline-purple,
button[style*="purple"] {
    background: #0f172a !important; 
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important; /* Kill the neon glow */
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}

.btn-secondary:hover, 
.btn-outline-purple:hover, 
.settings-pane .btn-secondary:hover, 
.settings-pane .btn-outline-purple:hover,
button[style*="purple"]:hover {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}


/* ======== PROMPT THUMBNAIL & LIST PANEL STYLES (COMPACT) ======== */
.prompt-list-panel {
    flex: 0 0 clamp(300px, 30vw, 360px) !important;
    width: clamp(300px, 30vw, 360px) !important;
    min-width: 290px !important;
    max-width: 380px !important;
    border-right: 1px solid #333 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.25) !important;
}
.prompt-editor-panel {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 16px 20px !important;
    overflow-y: auto !important;
}
.prompt-item-container {
    display: flex !important;
    align-items: center !important;
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    transition: background 0.15s ease, border-left-color 0.15s ease !important;
    padding: 5px 8px !important;
    gap: 6px !important;
    min-height: 46px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.prompt-item-container:hover {
    background: rgba(255,255,255,0.04) !important;
}
.prompt-item-container.prompt-row-selected {
    background: rgba(82, 55, 196, 0.15) !important;
    border-left-color: #5237c4 !important;
}
.prompt-item-container .drag-handle {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    color: #555 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.prompt-item-container .prompt-checkbox {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.prompt-thumb-cell {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #0d0d1a !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.prompt-item-container button,
.prompt-item-container .toggle-visibility-btn,
.prompt-item-container .move-up-btn,
.prompt-item-container .move-down-btn {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.toggle-visibility-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s, transform 0.2s !important;
}
.toggle-visibility-btn:hover {
    opacity: 1 !important;
    transform: scale(1.15) !important;
}
.toggle-visibility-btn svg, .toggle-visibility-btn i {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.2 !important;
    display: block !important;
}
.prompt-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    color: #eee !important;
    padding: 0 4px !important;
}
.reorder-controls {
    display: flex !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
}
.move-up-btn, .move-down-btn {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #666 !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}
.move-up-btn:hover, .move-down-btn:hover {
    opacity: 1 !important;
    color: #00d2ff !important;
}
.move-up-btn svg, .move-down-btn svg,
.move-up-btn i, .move-down-btn i {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 2.2 !important;
    display: block !important;
}


/* ======== PROMPT EDITOR PREVIEW FIX ======== */
#edit-preview-container {
    height: 320px !important;
    max-height: 40vh !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
#edit-preview {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}


/* ======== HIDDEN CLASS FIX - Must come LAST to win over all !important overrides ======== */
.hidden,
[class*="hidden"],
button.hidden,
.btn-primary.hidden,
.btn-secondary.hidden,
.btn-magenta.hidden,
#global-header.hidden,
#global-header.fh-header-hidden,
#start-screen:not(.hidden) ~ #global-header,
#processing-screen:not(.hidden) ~ #global-header,
#capture-screen:not(.hidden) ~ #global-header,
#result-screen:not(.hidden) ~ #global-header,
#passcode-screen:not(.hidden) ~ #global-header,
#age-gate-screen:not(.hidden) ~ #global-header,
#consent-screen:not(.hidden) ~ #global-header,
body:has(#start-screen:not(.hidden)) #global-header,
body:has(#processing-screen:not(.hidden)) #global-header,
body:has(#capture-screen:not(.hidden)) #global-header,
body:has(#result-screen:not(.hidden)) #global-header,
body:has(#passcode-screen:not(.hidden)) #global-header,
body:has(#age-gate-screen:not(.hidden)) #global-header,
body:has(#consent-screen:not(.hidden)) #global-header,
body:has(#config-screen[style*="display: flex"]) #global-header,
body:has(#gallery-screen[style*="display: flex"]) #global-header {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ======== HEADER TOP SPACING FIX ======== */
#global-header, .header {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/* ======== ULTIMATE BLUE BUTTON OVERRIDE ======== */
.settings-pane .btn-primary, 
.settings-pane button[style*="orange"],
.config-container .btn-primary,
.btn-primary, .btn-magenta, #save-exit-pass-btn, #save-config-btn {
  background: linear-gradient(90deg, #2859c5 0%, #5237c4 50%, #762596 100%) !important;
  color: white !important;
  border: 1px solid rgba(0,0,0,0.8) !important; 
  border-radius: 6px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 5px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.settings-pane .btn-primary:hover, 
.settings-pane button[style*="orange"]:hover,
.config-container .btn-primary:hover,
.btn-primary:hover, .btn-magenta:hover, #save-exit-pass-btn:hover, #save-config-btn:hover {
  background: var(--theme-cta-bg, linear-gradient(90deg, #00d2ff 0%, #7828ff 50%, #e024c3 100%)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(0px) !important;
}

/* ======== SIMPLE OUTLINE BUTTON FIX ======== */
.btn-secondary, 
.btn-outline-purple, 
.settings-pane .btn-secondary, 
.settings-pane .btn-outline-purple,
button[style*="purple"] {
    background: #0f172a !important; 
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover, 
.btn-outline-purple:hover, 
.settings-pane .btn-secondary:hover, 
.settings-pane .btn-outline-purple:hover,
button[style*="purple"]:hover {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* ======== FORCE HIDDEN TO WORK REGARDLESS OF DISPLAY OVERRIDES ======== */
.hidden {
  display: none !important;
}

/* =========================================================================
   UNIVERSAL RESPONSIVE UI & DISPLAY NORMALIZATION (GLOBAL SAAS STANDARD)
   ========================================================================= */

/* 1. Root & Viewport Safety */
html, body {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  font-size: clamp(14px, 1.1vw, 20px) !important;
}

/* 2. Universal Settings & Config Modal - Fills Viewport Cleanly */
.config-modal {
  padding: clamp(8px, 1.5vh, 20px) clamp(8px, 1.5vw, 20px) !important;
  box-sizing: border-box !important;
}

.config-container {
  width: 95vw !important;
  height: 94vh !important;
  max-width: 96vw !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: clamp(16px, 2vw, 28px) !important;
  overflow: hidden !important;
  margin: auto !important;
  font-size: clamp(14px, 1.1vw, 18px) !important;
}

#password-modal .config-container,
#confirm-modal .config-container,
#recharge-modal .config-container {
  width: min(92vw, 480px) !important;
  height: auto !important;
  max-width: 92vw !important;
}

.config-header {
  flex-shrink: 0 !important;
  padding: clamp(10px, 1.6vh, 20px) clamp(14px, 2vw, 28px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

.config-header h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.9rem) !important;
  margin: 0 !important;
}

/* Master Protected Action Buttons in Config Header (Tour Guide, Close) */
.config-header .qlickz-tour-icon-btn,
.config-header .icon-btn,
.config-header button.icon-btn,
.config-header #close-config-btn,
.config-header #kiosk-owner-guide-btn,
.config-modal .config-header .icon-btn,
#close-recharge-btn,
#close-gallery-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  background: rgba(12, 16, 28, 0.85) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.5) !important;
  color: #00d2ff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.config-header .qlickz-tour-icon-btn svg,
.config-header .icon-btn svg,
.config-header .icon-btn i,
.config-header button.icon-btn svg,
.config-header #close-config-btn svg,
.config-header #kiosk-owner-guide-btn svg,
.config-modal .config-header .icon-btn svg,
#close-recharge-btn svg,
#close-gallery-btn svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  stroke: #00d2ff !important;
  stroke-width: 2.2px !important;
  display: block !important;
  margin: auto !important;
}

/* Master Settings Tab Navigation Pill Styles */
.config-tabs {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  background: rgba(8, 10, 18, 0.7) !important;
  border-bottom: 1px solid rgba(0, 210, 255, 0.2) !important;
  padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 16px) !important;
  gap: clamp(6px, 0.8vw, 10px) !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.config-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tab-btn {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: clamp(6px, 0.9vh, 10px) clamp(12px, 1.4vw, 18px) !important;
  font-size: clamp(0.78rem, 1vw, 0.95rem) !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tab-btn:hover {
  color: #ffffff !important;
  background: rgba(0, 210, 255, 0.08) !important;
  border-color: rgba(0, 210, 255, 0.2) !important;
}

.tab-btn.active {
  background: rgba(0, 210, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--theme-primary, #00d2ff) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.15) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(0, 210, 255, 0.8) !important;
}

.config-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: clamp(14px, 2vh, 28px) clamp(16px, 2.5vw, 32px) !important;
}

.settings-pane {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(15px, 2vh, 25px) !important;
  padding: 0 !important;
  min-height: 100% !important;
  font-size: clamp(14px, 1.1vw, 18px) !important;
}

.settings-pane h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
  margin-bottom: clamp(10px, 1.5vh, 20px) !important;
}

.settings-pane h4 {
  font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
  margin-bottom: clamp(6px, 1vh, 12px) !important;
}

.settings-pane label,
.settings-pane p,
.settings-pane span {
  font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important;
}

/* Form Inputs & Controls Elastic Scaling */
.settings-pane input[type="text"],
.settings-pane input[type="number"],
.settings-pane input[type="password"],
.settings-pane textarea,
.config-container input[type="text"],
.config-container input[type="number"],
.category-edit-input,
#new-category-input {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.4vw, 16px) !important;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important;
  box-sizing: border-box !important;
}

/* Master Theme-Aware Modern Select & Dropdown Styling */
:root, html, body {
  color-scheme: dark !important;
}

select,
.settings-pane select,
.config-container select,
#studio-workspace-container select {
  color-scheme: dark !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 0 !important;
  width: 100% !important;
  background-color: var(--theme-pill-bg, rgba(14, 18, 30, 0.95)) !important;
  color: var(--theme-text-primary, #ffffff) !important;
  border: 1.5px solid var(--theme-pill-border, rgba(0, 210, 255, 0.25)) !important;
  border-radius: 8px !important;
  padding: 8px 34px 8px 12px !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  box-sizing: border-box !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300d2ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 13px 13px !important;
}

select:hover,
.settings-pane select:hover,
.config-container select:hover {
  border-color: var(--theme-primary, #00d2ff) !important;
  box-shadow: 0 0 12px var(--theme-pill-active-glow, rgba(0, 210, 255, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

select:focus,
.settings-pane select:focus,
.config-container select:focus {
  border-color: var(--theme-primary, #00d2ff) !important;
  box-shadow: 0 0 16px var(--theme-primary, #00d2ff), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Theme-Specific Chevron Colors */
[data-kiosk-theme="luxury-gold"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
[data-kiosk-theme="hollywood-red"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff1e27' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
[data-kiosk-theme="romantic-rose"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
[data-kiosk-theme="minimal-white"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
[data-kiosk-theme="holographic-prism"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
[data-kiosk-theme="pastel-blossom"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Modern Dark Option Lists in Chromium / Android WebView */
select option,
.settings-pane select option,
.config-container select option,
optgroup {
  color-scheme: dark !important;
  background-color: #0b0e18 !important;
  color: #f1f5f9 !important;
  padding: 12px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

select option:checked,
select option:hover,
select option:focus {
  background-color: #1a2238 !important;
  color: var(--theme-primary, #00d2ff) !important;
  font-weight: 700 !important;
}

/* Dedicated Overlay Studio Action Bar Select */
#studio-action-bar #studio-design-selector {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  line-height: 28px !important;
  padding: 0 24px 0 8px !important;
  font-size: 0.76rem !important;
  width: clamp(140px, 22vw, 280px) !important;
  max-width: 320px !important;
  background-position: right 6px center !important;
  background-size: 11px 11px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.settings-pane button:not(.icon-btn):not(.qlickz-tour-icon-btn):not(.toggle-visibility-btn):not(.move-up-btn):not(.move-down-btn):not([id^="studio-"]):not(.studio-macro-btn):not(.tab-btn),
.config-container button:not(.icon-btn):not(.qlickz-tour-icon-btn):not(.toggle-visibility-btn):not(.move-up-btn):not(.move-down-btn):not([id^="studio-"]):not(.studio-macro-btn):not(.tab-btn) {
  min-width: 0 !important;
  white-space: nowrap !important;
  padding: clamp(8px, 1.2vh, 14px) clamp(14px, 1.8vw, 24px) !important;
  font-size: clamp(0.82rem, 1.1vw, 1.02rem) !important;
}

/* 3. Universal Home Screen & Category Navigation */
.header {
  padding: clamp(10px, 1.8vh, 24px) clamp(16px, 3vw, 40px) !important;
}

.logo {
  font-size: clamp(1.4rem, 3.2vw, 2.6rem) !important;
  letter-spacing: clamp(2px, 0.5vw, 5px) !important;
}

.category-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  justify-content: flex-start !important;
  max-width: min(94vw, 1300px) !important;
  margin: 0 auto !important;
  padding: 8px clamp(12px, 2vw, 24px) !important;
  gap: clamp(6px, 1vw, 12px) !important;
}

.category-container::-webkit-scrollbar {
  display: none !important;
}

.category-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: clamp(6px, 1vh, 10px) clamp(12px, 1.6vw, 22px) !important;
  font-size: clamp(0.72rem, 1vw, 0.9rem) !important;
}

/* Home Grid & Card Proportions */
.home-screen {
  padding: clamp(10px, 1.5vh, 25px) clamp(14px, 2.5vw, 36px) !important;
}

.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 260px), 1fr)) !important;
  gap: clamp(12px, 1.8vw, 24px) !important;
}

.card {
  border-radius: clamp(14px, 1.5vw, 22px) !important;
  padding: clamp(6px, 0.8vw, 12px) !important;
}

.card-title {
  font-size: clamp(0.75rem, 1.2vw, 1.05rem) !important;
}

/* 4. Universal Camera Capture Viewport */
.camera-view {
  width: min(94vw, 1400px) !important;
  height: auto !important;
  max-height: min(78vh, 850px) !important;
  aspect-ratio: 16/9 !important;
  border-radius: clamp(14px, 2vw, 24px) !important;
  margin: auto !important;
}

@media (orientation: portrait) {
  .camera-view {
    aspect-ratio: 9/16 !important;
    max-height: min(72vh, 800px) !important;
    width: auto !important;
    max-width: 92vw !important;
  }
}

.capture-controls {
  padding: clamp(12px, 2vh, 26px) clamp(16px, 2.5vw, 36px) !important;
  gap: clamp(12px, 2vh, 24px) !important;
  border-radius: clamp(20px, 3vw, 40px) !important;
}

.btn-primary, .btn-secondary {
  padding: clamp(10px, 1.5vh, 18px) clamp(20px, 2.5vw, 42px) !important;
  font-size: clamp(0.85rem, 1.2vw, 1.15rem) !important;
}

/* 5. Universal AI Result & QR Screen */
.result-main {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  overflow: hidden !important;
}

.result-image-container {
  flex: 3 !important;
  padding: clamp(10px, 2vh, 35px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.result-image {
  max-height: min(80vh, 850px) !important;
  max-width: 90% !important;
  border-radius: clamp(14px, 2vw, 22px) !important;
  object-fit: contain !important;
}

.result-controls {
  flex: 1.2 !important;
  min-width: clamp(260px, 25vw, 380px) !important;
  max-width: 420px !important;
  padding: clamp(16px, 2.5vh, 32px) !important;
  gap: clamp(12px, 1.8vh, 22px) !important;
}

.result-controls button {
  min-height: clamp(48px, 6vh, 68px) !important;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important;
}

@media (orientation: portrait) {
  .result-main {
    flex-direction: column !important;
  }
  .result-image-container {
    padding: clamp(10px, 1.5vh, 20px) !important;
    padding-bottom: 210px !important;
  }
  .result-image {
    max-height: 60vh !important;
  }
  .result-controls {
    position: absolute !important;
    bottom: clamp(15px, 2.5vh, 30px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 480px) !important;
    max-width: 92vw !important;
    min-width: unset !important;
    padding: clamp(12px, 1.8vh, 20px) !important;
    border-radius: 20px !important;
  }
}

/* 6. Universal Consent & Minor Gate Modals */
.consent-container {
  width: min(94vw, 840px) !important;
  height: min(88vh, 850px) !important;
  max-height: 88vh !important;
  border-radius: clamp(16px, 2vw, 24px) !important;
}

.consent-header {
  padding: clamp(14px, 2vh, 24px) !important;
}

.consent-header h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem) !important;
}

.consent-body {
  padding: clamp(14px, 2vh, 26px) !important;
}

.consent-footer {
  padding: clamp(14px, 2vh, 22px) !important;
}

.consent-buttons button {
  height: clamp(46px, 6vh, 58px) !important;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important;
}

/* 7. Universal Passcode Screen */
#booth-keypad {
  max-width: min(88vw, 360px) !important;
  margin: 0 auto !important;
  gap: clamp(8px, 1.5vw, 15px) !important;
}

#booth-keypad .key {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
}


/* =========================================================================
   PASSWORD & PASSCODE MODAL KEYBOARD RESPONSIVE FIX (LANDSCAPE & PORTRAIT)
   ========================================================================= */
#password-modal .config-container {
  width: min(94vw, 680px) !important;
  max-width: 680px !important;
  height: auto !important;
  max-height: 94vh !important;
  padding: clamp(18px, 2.2vh, 32px) clamp(16px, 2.5vw, 36px) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
}

#password-modal .virtual-keyboard {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: clamp(12px, 1.5vh, 22px) !important;
  padding: clamp(8px, 1.2vw, 16px) !important;
  gap: clamp(6px, 1vh, 10px) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#password-modal .kb-row {
  display: flex !important;
  width: 100% !important;
  gap: clamp(4px, 0.7vw, 8px) !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#password-modal .kb-key {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 58px !important;
  height: clamp(38px, 5.5vh, 52px) !important;
  padding: 0 2px !important;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
  transition: all 0.1s ease !important;
}

#password-modal .kb-key:active {
  background: var(--theme-primary, #00d2ff) !important;
  color: #000000 !important;
  transform: scale(0.96) !important;
}

#password-modal .kb-key.special,
#password-modal .kb-key.caps-active {
  flex: 1.4 1 0 !important;
  max-width: 80px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-size: clamp(0.75rem, 1vw, 0.95rem) !important;
}

#password-modal .kb-key.enter-key,
#password-modal .kb-key.wide {
  flex: 2 1 0 !important;
  max-width: 140px !important;
  background: var(--theme-cta-bg, linear-gradient(135deg, #00d2ff, #7f00ff)) !important;
  color: var(--theme-cta-text, #ffffff) !important;
  font-weight: 800 !important;
}

#admin-password-input {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* =========================================================================
   CAPTURE SCREEN — FULL-SCREEN LIVE CAMERA & TEST MODE PURE UPLOAD
   ========================================================================= */
#capture-screen.capture-screen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 100 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#capture-screen.hidden {
  display: none !important;
}

/* Floating Light Translucent Header */
#capture-screen .header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: clamp(60px, 8vh, 75px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 clamp(16px, 3vw, 40px) !important;
  z-index: 150 !important;
  background: linear-gradient(180deg, rgba(5, 7, 14, 0.65) 0%, rgba(5, 7, 14, 0.25) 70%, transparent 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  pointer-events: auto !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#capture-screen .header .logo {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--theme-primary, #00d2ff) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.4)) !important;
}

#capture-screen .capture-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: clamp(40px, 5vw, 48px) !important;
  height: clamp(40px, 5vw, 48px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#capture-screen .capture-close-btn:hover {
  background: rgba(255, 50, 80, 0.3) !important;
  border-color: #ff3366 !important;
  box-shadow: 0 0 16px rgba(255, 50, 80, 0.5) !important;
}

/* Full Screen Camera Viewport */
#capture-screen .camera-container {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

#capture-screen .camera-view {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove boxed inner neon border in live full-screen mode */
#capture-screen:not(.test-mode-active) .camera-view::after {
  display: none !important;
}

#capture-screen video#video-feed {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  display: block !important;
  background: #000 !important;
}

/* Floating Light Translucent Controls */
#capture-screen .capture-controls {
  position: absolute !important;
  right: clamp(20px, 3.5vw, 45px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(14px, 2vh, 22px) !important;
  background: rgba(5, 7, 14, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: clamp(18px, 2.5vh, 28px) clamp(16px, 2vw, 24px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  z-index: 140 !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 210, 255, 0.12) !important;
  pointer-events: auto !important;
}

@media (orientation: portrait) {
  #capture-screen .capture-controls {
    top: auto !important;
    bottom: clamp(20px, 4vh, 40px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    width: min(90vw, 480px) !important;
    max-width: 480px !important;
    padding: clamp(12px, 1.8vh, 18px) clamp(16px, 3vw, 24px) !important;
  }
  #capture-screen #post-capture-controls {
    flex-direction: row !important;
    width: 100% !important;
    gap: 12px !important;
  }
}

/* Buttons inside capture controls */
#capture-screen .capture-controls button {
  min-width: clamp(130px, 12vw, 170px) !important;
  padding: clamp(12px, 1.6vh, 16px) clamp(22px, 2vw, 32px) !important;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  border-radius: 50px !important;
}

/* =========================================================================
   TEST MODE PURE IMAGE UPLOAD & CENTER BOX STYLING
   ========================================================================= */
#capture-screen.test-mode-active #video-feed {
  display: none !important;
}

#capture-screen.test-mode-active .capture-guide {
  display: none !important;
}

#capture-screen.test-mode-active .camera-view {
  background: radial-gradient(circle at 50% 50%, rgba(0, 210, 255, 0.05) 0%, rgba(5, 7, 14, 0.95) 85%) !important;
}

/* Test Upload Container & Dropzone */
.test-upload-box {
  width: min(88vw, 820px) !important;
  height: min(72vh, 560px) !important;
  aspect-ratio: 16/9 !important;
  border: 2px dashed var(--theme-primary, #00d2ff) !important;
  border-radius: 24px !important;
  background: rgba(10, 14, 26, 0.7) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.2), inset 0 0 25px rgba(0, 210, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  padding: 30px !important;
  position: relative !important;
}

@media (orientation: portrait) {
  .test-upload-box {
    width: min(90vw, 460px) !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
    max-height: 65vh !important;
    padding: 20px !important;
  }
}

.test-upload-box:hover, .test-upload-box.drag-over {
  border-color: #ffffff !important;
  background: rgba(0, 210, 255, 0.12) !important;
  box-shadow: 0 0 50px rgba(0, 210, 255, 0.4), inset 0 0 35px rgba(0, 210, 255, 0.15) !important;
  transform: scale(1.01) !important;
}

.test-upload-box-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 14px !important;
  pointer-events: none !important;
}

.test-upload-icon-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: rgba(0, 210, 255, 0.12) !important;
  border: 1.5px solid var(--theme-primary, #00d2ff) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--theme-primary, #00d2ff) !important;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3) !important;
}

.test-upload-title {
  color: #ffffff !important;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.test-upload-sub {
  color: #94a3b8 !important;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem) !important;
  max-width: 400px !important;
  line-height: 1.4 !important;
}

.test-upload-select-btn {
  pointer-events: auto !important;
  margin-top: 8px !important;
  padding: 10px 26px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
}

/* Uploaded Image Preview Box in Center */
#test-upload-preview {
  width: min(88vw, 820px) !important;
  height: min(72vh, 560px) !important;
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
  border: 3px solid var(--theme-primary, #00d2ff) !important;
  border-radius: 24px !important;
  background: #000000 !important;
  box-shadow: 0 0 40px rgba(0, 210, 255, 0.35), 0 20px 60px rgba(0, 0, 0, 0.9) !important;
  z-index: 25 !important;
  display: block !important;
  animation: test-preview-pop 0.35s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

@media (orientation: portrait) {
  #test-upload-preview {
    width: min(90vw, 460px) !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
    max-height: 65vh !important;
  }
}

#test-upload-preview.hidden {
  display: none !important;
}

@keyframes test-preview-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}