/* ===== EC Democrata Validador PWA ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:'Inter',sans-serif;background:#0a0a0a;color:#fff;-webkit-font-smoothing:antialiased}
:root{--p:#6b2fa0;--pc:#9b59d0;--pe:#4a1d73;--c1:#1a1a1a;--c2:#2d2d2d;--c3:#b0b0b0;--gr:#22c55e;--rd:#ef4444;--yl:#eab308}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;font-size:16px}

/* ===== TELAS ===== */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}

/* ===== LOGIN ===== */
#screen-login{align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#0a0a0a,#1a0a2e,#0a0a0a)}
.login-box{width:100%;max-width:380px}
.logo-area{text-align:center;margin-bottom:32px}
.logo-img{width:80px;margin:0 auto 16px;display:block;filter:drop-shadow(0 0 24px rgba(107,47,160,.5))}
.logo-area h1{font-family:'Anton',sans-serif;font-style:italic;font-size:34px;letter-spacing:1px}
.logo-sub{font-family:'Playfair Display',serif;font-style:italic;font-weight:900;text-transform:lowercase;font-size:12px;letter-spacing:3px;color:var(--pc);margin-top:6px}

.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--c3);margin-bottom:8px}
.field input{width:100%;padding:14px 16px;background:var(--c1);border:1.5px solid var(--c2);border-radius:10px;color:#fff;transition:.2s}
.field input:focus{outline:none;border-color:var(--p);background:#0a0a0a}

.btn-primary{width:100%;padding:16px;background:linear-gradient(135deg,var(--pe),var(--p));color:#fff;border-radius:10px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:.2s;margin-top:8px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(107,47,160,.4)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-secondary{padding:14px;background:var(--c1);border:1.5px solid var(--c2);color:#fff;border-radius:10px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.error-msg{background:rgba(239,68,68,.15);border:1px solid var(--rd);color:#fca5a5;padding:12px;border-radius:8px;font-size:13px;margin-top:12px;text-align:center}
.hidden{display:none!important}

/* ===== TOPBAR ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:rgba(10,10,10,.96);border-bottom:1px solid var(--c2);backdrop-filter:blur(16px);min-height:56px;flex-shrink:0}
.topbar-left{flex:1}
.topbar-center{flex:1;text-align:center;overflow:hidden}
.user-badge{font-size:12px;font-weight:600;color:var(--c3)}
.event-name{font-family:'Anton',sans-serif;font-style:italic;font-size:16px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-meta{font-size:10px;color:var(--c3);margin-top:2px}
.btn-icon{width:40px;height:40px;border-radius:50%;background:var(--c1);border:1px solid var(--c2);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.btn-icon:hover{border-color:var(--p);background:rgba(107,47,160,.1)}

/* ===== CONTEÚDO ===== */
.content{flex:1;overflow-y:auto;padding:24px 16px;-webkit-overflow-scrolling:touch}
.section-title{font-family:'Anton',sans-serif;font-style:italic;font-size:24px;text-transform:uppercase;margin-bottom:6px;letter-spacing:0}
.section-sub{font-family:'Playfair Display',serif;font-style:italic;font-weight:900;text-transform:lowercase;font-size:12px;letter-spacing:2px;color:var(--pc);margin-bottom:24px}

.events-list{display:flex;flex-direction:column;gap:10px}
.event-card{background:var(--c1);border:1px solid var(--c2);border-radius:12px;padding:18px;text-align:left;transition:.2s;width:100%}
.event-card:active{transform:scale(.98)}
.event-card:hover{border-color:var(--p)}
.event-card-name{font-family:'Anton',sans-serif;font-style:italic;font-size:18px;text-transform:uppercase;margin-bottom:6px}
.event-card-meta{font-size:13px;color:var(--c3);line-height:1.5}
.event-card-meta strong{color:#fff}
.event-card-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:3px 8px;border-radius:10px;background:rgba(107,47,160,.15);color:var(--pc);border:1px solid rgba(107,47,160,.3);margin-bottom:8px}

.loading{text-align:center;padding:32px;color:var(--c3);font-size:14px}
.empty{text-align:center;padding:48px 24px;color:var(--c3)}
.empty p{font-size:14px;margin-top:8px}

/* ===== SCANNER ===== */
.scanner-wrapper{position:relative;flex:1;background:#000;overflow:hidden}
#video{width:100%;height:100%;object-fit:cover;display:block}
.scanner-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.scan-frame{width:75vw;height:75vw;max-width:340px;max-height:340px;border:2px solid #fff;border-radius:24px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);position:relative}
.scan-frame::before,.scan-frame::after{content:'';position:absolute;width:32px;height:32px;border:4px solid var(--pc)}
.scan-frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:24px 0 0 0}
.scan-frame::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 24px 0}
.scan-hint{margin-top:24px;color:#fff;font-size:14px;background:rgba(0,0,0,.7);padding:8px 16px;border-radius:20px;font-weight:500}

.bottom-controls{display:flex;justify-content:center;gap:24px;padding:20px;background:#0a0a0a;border-top:1px solid var(--c2);flex-shrink:0}
.btn-circle{width:56px;height:56px;border-radius:50%;background:var(--c1);border:1.5px solid var(--c2);font-size:22px;display:flex;align-items:center;justify-content:center;transition:.2s}
.btn-circle:hover{border-color:var(--p);background:rgba(107,47,160,.1)}
.btn-circle.active{border-color:var(--pc);background:rgba(107,47,160,.2);box-shadow:0 0 16px rgba(107,47,160,.4)}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal.show{display:flex}
.modal-content{background:#0a0a0a;border:1px solid var(--c2);border-radius:20px;padding:32px 24px;width:100%;max-width:400px;text-align:center;animation:popIn .25s ease}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.modal-content h2{font-family:'Anton',sans-serif;font-style:italic;font-size:22px;text-transform:uppercase;margin-bottom:12px}
.modal-content input{width:100%;padding:14px 16px;background:var(--c1);border:1.5px solid var(--c2);border-radius:10px;color:#fff;margin-top:12px}
.modal-content input:focus{outline:none;border-color:var(--p)}

/* ===== RESULTADO ===== */
.result-icon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:54px;margin:0 auto 20px;font-weight:900}
.result-icon.success{background:rgba(34,197,94,.2);color:var(--gr);box-shadow:0 0 32px rgba(34,197,94,.3)}
.result-icon.error{background:rgba(239,68,68,.2);color:var(--rd);box-shadow:0 0 32px rgba(239,68,68,.3)}
.result-icon.warning{background:rgba(234,179,8,.2);color:var(--yl);box-shadow:0 0 32px rgba(234,179,8,.3)}

.result-title{font-family:'Anton',sans-serif;font-style:italic;text-transform:uppercase;font-size:30px;margin-bottom:8px;letter-spacing:0}
.result-reason{font-size:14px;color:var(--c3);margin-bottom:20px;line-height:1.5}

.result-info{background:var(--c1);border:1px solid var(--c2);border-radius:12px;padding:16px;text-align:left;margin-bottom:20px;font-size:13px}
.result-info .row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(45,45,45,.5)}
.result-info .row:last-child{border:none}
.result-info .label{color:var(--c3);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.result-info .value{font-weight:600;text-align:right;max-width:60%;word-break:break-word}

#modal-result.success .modal-content{border-color:rgba(34,197,94,.4);box-shadow:0 0 40px rgba(34,197,94,.15)}
#modal-result.error .modal-content{border-color:rgba(239,68,68,.4);box-shadow:0 0 40px rgba(239,68,68,.15)}
#modal-result.warning .modal-content{border-color:rgba(234,179,8,.4);box-shadow:0 0 40px rgba(234,179,8,.15)}

/* ===== STATS ===== */
.stats-content{max-width:340px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.stat-box{background:var(--c1);border:1px solid var(--c2);border-radius:10px;padding:14px;text-align:center}
.stat-box .num{font-family:'Anton',sans-serif;font-style:italic;font-size:28px;line-height:1}
.stat-box .lbl{font-size:10px;color:var(--c3);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}
.stat-box.highlight .num{color:var(--gr)}

/* ===== ANIMAÇÕES ===== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.scanning{animation:pulse 1.5s ease-in-out infinite}

/* PWA standalone fixes */
@media (display-mode: standalone){
  body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}