:root{
    --bg: #0a0f0c;
    --bg-card: #101712;
    --bg-card-2: #141d17;
    --green: #33e17a;
    --green-dim: #1f8c4f;
    --gold: #f2c744;
    --ink: #eef2ee;
    --ink-dim: #93a397;
    --line: #22301f;
    --danger: #ef4b4b;
    --radius: 14px;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:
      radial-gradient(circle at 15% 0%, rgba(51,225,122,0.08), transparent 45%),
      radial-gradient(circle at 85% 10%, rgba(242,199,68,0.05), transparent 40%),
      var(--bg);
    color: var(--ink); font-family:'Inter', sans-serif; min-height:100vh;
  }
  .stripe-bg{
    position:fixed; inset:0; z-index:-1; opacity:0.035;
    background-image: repeating-linear-gradient(115deg, #33e17a 0 26px, transparent 26px 52px, #000 52px 78px, transparent 78px 104px);
  }
  h1,h2,h3,.display{ font-family:'Rajdhani', sans-serif; font-weight:700; letter-spacing:0.02em; }
  .mono{ font-family:'Space Mono', monospace; }

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
    position: sticky; top:0; background: rgba(10,15,12,0.85); backdrop-filter: blur(10px); z-index: 20;
  }
  .brand{ display:flex; align-items:center; gap:14px; }
  .avatar{
    width:52px; height:52px; border-radius:50%; object-fit:cover;
    border: 2px solid var(--green); box-shadow: 0 0 0 4px rgba(51,225,122,0.12), 0 0 18px rgba(51,225,122,0.25);
  }
  .brand-name{ font-size: 24px; line-height:1; color:var(--ink); }
  .brand-name span{ color: var(--green); }
  .badge{
    font-family:'Rajdhani', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.12em;
    background: linear-gradient(135deg, var(--green), #17b85f);
    color:#062012; padding:8px 14px; border-radius:999px;
    box-shadow: 0 4px 14px rgba(51,225,122,0.35);
  }

  main{ max-width: 620px; margin: 0 auto; padding: 40px 20px 80px; }

  .hero{ text-align:center; margin-bottom:34px; }
  .hero .eyebrow{ color: var(--gold); font-size:13px; letter-spacing:0.18em; text-transform:uppercase; font-family:'Space Mono', monospace; }
  .hero h1{ font-size: 40px; margin: 8px 0 6px; }
  .hero p{ color: var(--ink-dim); font-size:15px; margin:0; }

  .status-pill{
    display:inline-flex; align-items:center; gap:8px; margin-top:16px;
    font-family:'Space Mono', monospace; font-size:12px; padding:6px 12px; border-radius:999px;
    border:1px solid var(--line); color: var(--ink-dim);
  }
  .dot{ width:8px; height:8px; border-radius:50%; }
  .dot.open{ background: var(--green); box-shadow:0 0 8px var(--green); }
  .dot.closed{ background: var(--danger); box-shadow:0 0 8px var(--danger); }

  .ticket{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    position: relative;
    padding: 30px 26px;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
  }
  .ticket::before, .ticket::after{
    content:''; position:absolute; width:24px; height:24px; background:var(--bg); border-radius:50%;
    top:50%; transform:translateY(-50%);
  }
  .field{ margin-bottom:22px; }
  .field label{ display:block; font-family:'Rajdhani', sans-serif; font-weight:600; font-size:16px; margin-bottom:10px; color:var(--ink); }
  .field .hint{ color:var(--ink-dim); font-size:12px; margin-top:6px; font-family:'Space Mono', monospace; }

  .platform-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .platform-options input{ display:none; }
  .platform-options label{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 10px; border-radius:10px; border:1.5px solid var(--line);
    background: var(--bg-card-2); cursor:pointer; font-family:'Rajdhani', sans-serif; font-weight:600; font-size:16px;
    transition: all .15s ease; color: var(--ink-dim);
  }
  .platform-options.cols-3{ grid-template-columns:1fr 1fr 1fr; }
  .platform-options input:checked + label{
    border-color: var(--green); color: var(--green); background: rgba(51,225,122,0.08);
    box-shadow: 0 0 0 3px rgba(51,225,122,0.12);
  }

  input[type=text], input[type=email]{
    width:100%; padding:14px 16px; border-radius:10px; border:1.5px solid var(--line);
    background: var(--bg-card-2); color: var(--ink); font-size:15px; font-family:'Inter', sans-serif;
    outline:none; transition: border-color .15s ease;
  }
  input[type=text]:focus, input[type=email]:focus{ border-color: var(--green); }
  input::placeholder{ color:#4d5a4f; }

  .submit-btn{
    width:100%; padding:16px; border:none; border-radius:10px; margin-top:6px;
    background: linear-gradient(135deg, var(--green), #1fae5c); color:#052013;
    font-family:'Rajdhani', sans-serif; font-weight:700; font-size:18px; letter-spacing:0.03em;
    cursor:pointer; box-shadow: 0 10px 24px -8px rgba(51,225,122,0.5);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .submit-btn:hover{ transform: translateY(-1px); }
  .submit-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
  .error-msg{ color: var(--danger); font-size:13px; margin-top:8px; font-family:'Space Mono', monospace; display:none; }

  .thanks{ text-align:center; padding: 30px 10px; display:none; }
  .thanks .check{
    width:64px; height:64px; border-radius:50%; margin: 0 auto 18px; display:flex; align-items:center; justify-content:center;
    background: rgba(51,225,122,0.12); border: 2px solid var(--green); font-size:30px; color:var(--green);
  }
  .thanks h2{ font-size:26px; margin: 0 0 8px; }
  .thanks p{ color: var(--ink-dim); margin:0; }

  .closed-msg{ text-align:center; padding: 40px 10px; display:none; }
  .closed-msg .icon{ font-size:34px; margin-bottom:10px; }
  .closed-msg h2{ font-size:24px; margin:0 0 8px; color: var(--danger); }
  .closed-msg p{ color: var(--ink-dim); margin:0; }

  footer{ text-align:center; padding: 20px; }
  footer a{ color: var(--ink-dim); font-family:'Space Mono', monospace; font-size:12px; text-decoration:none; border-bottom:1px dashed var(--line); padding-bottom:2px; }
  footer a:hover{ color: var(--green); border-color: var(--green); }

  /* ADMIN */
  #admin-view{ display:none; }
  .admin-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
  .admin-header .title{ display:flex; align-items:center; gap:10px; }
  .back-link{ color: var(--ink-dim); font-family:'Space Mono', monospace; font-size:13px; cursor:pointer; text-decoration:none; }
  .back-link:hover{ color: var(--green); }

  .admin-main{ max-width: 900px; margin:0 auto; padding: 30px 20px 80px; display:grid; gap:24px; grid-template-columns: 1fr; }
  @media(min-width:760px){ .admin-main{ grid-template-columns: 1.1fr 0.9fr; } }

  .panel{ background: var(--bg-card); border:1px solid var(--line); border-radius: var(--radius); padding:22px; }
  .panel h3{ margin:0 0 4px; font-size:20px; }
  .panel .sub{ color: var(--ink-dim); font-size:13px; margin-bottom:18px; }

  .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background: var(--bg-card-2); border-radius:10px; margin-bottom:14px; }
  .toggle-row .label{ font-family:'Rajdhani', sans-serif; font-weight:600; }
  .switch{ position:relative; width:50px; height:28px; }
  .switch input{ display:none; }
  .slider{ position:absolute; inset:0; background:#2b3a2e; border-radius:999px; cursor:pointer; transition: background .2s; }
  .slider::before{ content:''; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#cfd8d1; border-radius:50%; transition: transform .2s; }
  .switch input:checked + .slider{ background: var(--green); }
  .switch input:checked + .slider::before{ transform: translateX(22px); background:#052013; }

  .new-round-btn{
    width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:transparent; color: var(--ink-dim);
    font-family:'Space Mono', monospace; font-size:12.5px; cursor:pointer; margin-top:4px;
  }
  .new-round-btn:hover{ border-color: var(--gold); color: var(--gold); }

  .participant-list{ list-style:none; margin:0; padding:0; max-height: 320px; overflow-y:auto; }
  .participant-list li{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px;
  }
  .participant-list li:last-child{ border-bottom:none; }
  .participant-list .p-user{ font-family:'Space Mono', monospace; color: var(--ink); }
  .participant-list .p-plat{ font-size:11px; color: var(--ink-dim); border:1px solid var(--line); padding:2px 7px; border-radius:999px; }
  .empty-note{ color: var(--ink-dim); font-size:13px; text-align:center; padding: 24px 10px; }

  .wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
  .wheel-stage{ position:relative; width: 260px; height:260px; }
  .wheel-pointer{
    position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
    border-top:20px solid var(--gold); z-index:5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  }
  #wheel-canvas, .wheel-canvas{ border-radius:50%; box-shadow: 0 0 0 6px var(--bg-card-2), 0 0 0 8px var(--line), 0 20px 40px rgba(0,0,0,0.5); transition: transform 5.5s cubic-bezier(0.15, 0.75, 0.15, 1); }
  .spin-btn{
    padding:14px 26px; border:none; border-radius:10px; background: linear-gradient(135deg, var(--gold), #d4a520); color:#241a02;
    font-family:'Rajdhani', sans-serif; font-weight:700; font-size:16px; letter-spacing:0.03em; cursor:pointer;
    box-shadow: 0 10px 22px -8px rgba(242,199,68,0.5);
  }
  .spin-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .popout-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .popout-actions .spin-btn{ min-width:150px; }
  .spin-btn-secondary{
    background: transparent; border: 1.5px solid var(--green); color: var(--green); box-shadow:none;
  }
  .spin-btn-secondary:hover{ background: rgba(51,225,122,0.08); }

  .winners-row{
    display:grid; grid-template-columns: 1fr; gap:12px; width:100%; margin-top:4px;
  }
  .winners-row.two-up{ grid-template-columns: 1fr 1fr; }

  .winner-banner{
    text-align:center; padding:16px; border-radius:10px; margin-top:6px;
    background: rgba(242,199,68,0.1); border:1px solid var(--gold);
  }
  .winner-banner .label{ font-family:'Space Mono', monospace; font-size:11px; color: var(--gold); letter-spacing:0.12em; }
  .winner-banner .name{ font-family:'Rajdhani', sans-serif; font-weight:700; font-size:22px; margin-top:4px; }
  .winner-detail{
    display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
    font-family:'Space Mono', monospace; font-size:13px; color: var(--ink); margin-top:10px;
  }
  .winner-detail .wd-label{ color: var(--ink-dim); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; }
  .pix-value{ transition: filter 0.15s ease; }
  .pix-value.pix-blurred{ filter: blur(6px); user-select:none; }
  .reveal-btn{
    padding:3px 10px; border-radius:6px; border:1px solid var(--green); background:transparent; color: var(--green);
    font-family:'Space Mono', monospace; font-size:11px; cursor:pointer;
  }
  .reveal-btn:hover{ background: rgba(51,225,122,0.08); }
  .copy-btn{
    padding:3px 10px; border-radius:6px; border:1px solid var(--gold); background:transparent; color: var(--gold);
    font-family:'Space Mono', monospace; font-size:11px; cursor:pointer;
  }
  .copy-btn:hover{ background: rgba(242,199,68,0.12); }
  .copy-btn.copied{ background: var(--green); border-color: var(--green); color:#052013; }

  .sub-center{ text-align:center; color: var(--ink-dim); font-size:13px; margin:-6px 0 18px; }
  .public-participant-list{ list-style:none; margin:0; padding:0; max-height: 340px; overflow-y:auto; counter-reset: none; }
  .public-participant-list li{
    display:flex; align-items:center; gap:10px;
    padding:10px 4px; border-bottom:1px solid var(--line); font-size:14px;
  }
  .public-participant-list li:last-child{ border-bottom:none; }
  .public-participant-list .pl-index{
    font-family:'Space Mono', monospace; font-size:12px; color: var(--ink-dim);
    min-width:22px;
  }
  .public-participant-list .pl-user{ font-family:'Space Mono', monospace; color: var(--ink); flex:1; }

  /* LOGIN GATE */
  #login-view{ display:none; min-height:100vh; align-items:center; justify-content:center; padding:20px; }
  .login-card{ background: var(--bg-card); border:1px solid var(--line); border-radius: var(--radius); padding:30px 26px; width:100%; max-width:340px; text-align:center; }
  .login-card h3{ margin:0 0 6px; }
  .login-card p{ color: var(--ink-dim); font-size:13px; margin:0 0 18px; }
  .login-card input{ width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--line); background: var(--bg-card-2); color:var(--ink); font-size:15px; outline:none; margin-bottom:12px; text-align:center; letter-spacing:0.2em; }
  .login-card input:focus{ border-color: var(--green); }
  .login-card button{ width:100%; padding:13px; border:none; border-radius:10px; background: var(--green); color:#052013; font-family:'Rajdhani', sans-serif; font-weight:700; font-size:15px; cursor:pointer; }
  .login-card .login-err{ color: var(--danger); font-size:12.5px; margin-top:10px; display:none; font-family:'Space Mono', monospace; }

  /* POPOUT DA ROLETA — fonte de navegador com fundo transparente pra live */
  body.popout-page{ background: transparent !important; }
  body.popout-page .stripe-bg{ display:none; }
  .pop-gate-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
  .popout-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:22px; }
  .popout-wrap .platform-options{ background: rgba(10,15,12,0.55); border-radius:10px; padding:4px; backdrop-filter: blur(2px); }
  .popout-wrap .winners-row{ max-width:420px; }
  /* Destaque do ganhador no popout: alto contraste para transmissão */
  body.popout-page .winner-banner{
    padding:18px 20px;
    background:rgba(5,8,6,0.86);
    border:2px solid var(--gold);
    box-shadow:0 0 18px rgba(242,199,68,0.35), 0 8px 24px rgba(0,0,0,0.45);
    text-shadow:0 2px 8px rgba(0,0,0,0.9);
  }
  body.popout-page .winner-banner .label{
    color:#ffe58a;
    font-weight:700;
    text-shadow:0 0 10px rgba(242,199,68,0.75);
  }
  body.popout-page .winner-banner .name{
    color:#ffffff;
    font-size:28px;
    line-height:1.05;
    text-shadow:0 0 8px rgba(255,255,255,0.35), 0 3px 10px rgba(0,0,0,0.95);
  }
  body.popout-page .winner-banner .winner-detail{
    color:#ffffff;
  }
  body.popout-page .winner-banner .winner-detail .wd-label{
    color:#e9e9e9;
  }
  body.popout-page .winner-banner .reveal-btn,
  body.popout-page .winner-banner .copy-btn{
    text-shadow:none;
  }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background: var(--line); border-radius:8px; }