﻿*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{font-family:'Inter',-apple-system,sans-serif;font-size:14px}

    
    #nfc-view{
      background:#f0f0f0;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:20px;
      position:relative;
    }
    .nfc-logo{text-align:center}
    .nfc-logo-text{font-size:28px;font-weight:800;color:#e25b1f;letter-spacing:-.5px}
    .nfc-logo-sub{font-size:12px;color:#999;letter-spacing:.04em;margin-top:2px}
    .nfc-card{background:#fff;border-radius:15px;padding:40px;box-shadow:0 4px 8px rgba(0,0,0,.1);text-align:center;max-width:400px;width:100%}
    .nfc-status{font-size:1.2rem;font-weight:600;margin-bottom:16px;min-height:38px;text-align:center}
    .nfc-status.idle{color:#888}
    .nfc-status.success{color:green}
    .nfc-status.error{color:red}
    .scan-message{
      font-size:2.5rem;
      color:#007BFF;
      padding:20px;
      border:4px dashed #007BFF;
      border-radius:15px;
      display:inline-block;
      width:100%;
      max-width:300px;
      margin-bottom:20px;
      cursor:pointer;
      transition:background .2s;
      box-sizing:border-box;
    }
    .scan-message:hover{background:rgba(0,123,255,.05)}
    .sim-btn{background:#008e94;border:none;border-radius:5px;color:#fff;padding:10px 20px;font-size:14px;cursor:pointer;transition:background .2s;font-family:'Inter',sans-serif}
    .sim-btn:hover{background:#006f70}
    .nfc-footer{margin-top:18px;font-size:11px;color:#bbb;text-align:center}
    .back-link{color:#aaa;text-decoration:none;font-size:12px}
    .back-link:hover{color:#555}

    
    #kiosk-view{display:none;background:#f9f9fb;min-height:100vh;flex-direction:column;align-items:center;position:relative}
    #kiosk-view.active{display:flex}
    .language-switch{position:absolute;top:20px;right:20px}
    .language-switch select{padding:10px;font-size:14px;border:1px solid #ddd;border-radius:5px}
    .main-container{padding:20px;width:90%;max-width:800px}
    .navigation-buttons{display:flex;justify-content:space-between;margin-bottom:10px}
    .navigation-buttons button{padding:10px 20px;background:#008e94;color:white;border:none;border-radius:5px;font-size:14px;cursor:pointer;transition:background 0.3s ease}
    .navigation-buttons button:hover{background:#006f70}
    .carousel{position:relative;width:100%;overflow:hidden;margin-bottom:20px}
    .carousel-track{display:flex;transition:transform 0.5s ease-in-out}
    .carousel-slide{min-width:100%;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:20px 0;box-sizing:border-box}
    .team-card{flex:1 1 calc(33.333% - 40px);box-sizing:border-box;margin:10px;background:white;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.1);text-align:center;padding:15px;transition:transform 0.3s ease,border 0.3s ease;cursor:pointer;border:2px solid transparent}
    .team-card:hover{transform:scale(1.05)}
    .team-card.selected{border:2px solid orange}
    .image-container{width:100px;height:100px;background-color:#f0f0f0;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden;margin:0 auto 10px}
    .image-container svg{width:48px;height:48px;color:#008e94}
    .team-card h3{font-size:16px;color:#333;margin-bottom:5px;margin-top:0}
    .vote-button{display:none;margin-top:20px;padding:10px 20px;background:orange;color:white;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background 0.3s ease;font-family:'Inter',sans-serif}
    .vote-button:hover{background:darkorange}
    
    .role-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;z-index:150}
    .role-modal.open{display:flex}
    .role-modal-content{background:white;border-radius:10px;padding:24px;width:90%;max-width:360px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.3);position:relative}
    .role-modal-content h3{margin-bottom:16px;color:#008e94}
    .close-modal{position:absolute;top:10px;right:10px;background:transparent;border:none;font-size:20px;cursor:pointer;color:#333}
    .role-selection{display:flex;justify-content:space-around;margin-top:10px}
    .role-selection button{padding:10px 16px;background:#008e94;color:white;border:none;border-radius:5px;font-size:14px;cursor:pointer;transition:background 0.3s ease}
    .role-selection button:hover{background:#006f70}

    
    .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;align-items:center;justify-content:center}
    .modal-overlay.open{display:flex}
    .modal-box{background:#fff;border-radius:20px;padding:36px 40px;max-width:460px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:modalIn .25s ease}
    @keyframes modalIn{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
    .modal-icon{font-size:56px;margin-bottom:14px}
    .modal-title{font-size:20px;font-weight:800;margin-bottom:8px;color:#1a1a1a}
    .modal-sub{font-size:14px;color:#666;margin-bottom:24px;line-height:1.6}
    .modal-team-chip{display:inline-block;background:#e25b1f;color:#fff;border-radius:8px;padding:6px 18px;font-size:14px;font-weight:700;margin-bottom:20px}
    .modal-btns{display:flex;gap:12px;justify-content:center}
    .modal-btn-cancel{background:#f0f0f0;border:none;border-radius:10px;color:#555;padding:11px 24px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
    .modal-btn-cancel:hover{background:#e4e4e4}
    .modal-btn-confirm{background:#e25b1f;border:none;border-radius:10px;color:#fff;padding:11px 28px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
    .modal-btn-confirm:hover{opacity:.9}

    
    #confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:300}

    
    #thankyou-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:250;align-items:center;justify-content:center;flex-direction:column;gap:24px}
    #thankyou-overlay.open{display:flex}
    .ty-card{background:#fff;border-radius:24px;padding:48px 56px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.3);max-width:440px;width:90%}
    .ty-icon{font-size:72px;margin-bottom:16px}
    .ty-title{font-size:28px;font-weight:800;color:#1a1a1a;margin-bottom:8px}
    .ty-sub{font-size:15px;color:#666;margin-bottom:24px;line-height:1.6}
    .ty-btn{background:#008e94;border:none;border-radius:12px;color:#fff;padding:13px 36px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
