/* ===== WHITELIST CSS ===== */
:root {
  --accent: #007bff;
  --accent2: #3395ff;
  --accent-dark: #0056b3;
  --accent-glow: rgba(0,123,255,0.35);
  --accent-soft: rgba(0,123,255,0.08);
  --bg: #07060d;
  --bg2: #0b0a14;
  --card: #130f1e;
  --card2: #181224;
  --border: rgba(255,255,255,0.07);
  --border-accent: rgba(0,123,255,0.3);
  --text: #e0ddf0;
  --text2: #9a96b8;
  --text3: #5a5070;
  --white: #fff;
  --r: 12px;
  --trans: 0.25s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
.accent{color:var(--accent);}
a{text-decoration:none;color:inherit;}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(7,6,13,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Rajdhani',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:2px;}
.nav-logo img{width:36px;height:36px;border-radius:8px;}
.nav-back{color:var(--text2);font-size:0.87rem;display:flex;align-items:center;gap:6px;transition:color var(--trans);}
.nav-back:hover{color:var(--accent);}

/* HERO */
.wl-hero{position:relative;height:320px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;margin-top:64px;}
.wl-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.5);}
.wl-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,13,0.3) 0%,rgba(7,6,13,0.95) 100%);}
.wl-hero-content{position:relative;z-index:1;max-width:800px;padding:0 1.5rem;display:flex;flex-direction:column;gap:1rem;align-items:center;}
.wl-badge{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);border:1px solid var(--border-accent);color:var(--accent);font-size:0.75rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:0.35rem 1rem;border-radius:999px;}
.wl-hero-content h1{font-family:'Rajdhani',sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:700;line-height:1.1;}
.wl-hero-content p{color:var(--text2);font-size:0.88rem;line-height:1.7;max-width:680px;}
.wl-hero-content strong{color:var(--text);}

/* FORM WRAPPER */
.wl-wrapper{max-width:900px;margin:0 auto;padding:3rem 1.5rem 5rem;}
.wl-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem 2rem;margin-bottom:1.5rem;}
.wl-section-title{font-family:'Rajdhani',sans-serif;font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:10px;padding-bottom:0.85rem;border-bottom:1px solid var(--border);}
.wl-section-title i{color:var(--accent);}
.form-group{margin-bottom:1.25rem;}
.form-group:last-child{margin-bottom:0;}
label{display:block;font-size:0.85rem;font-weight:500;color:var(--text2);margin-bottom:0.45rem;}
.req{color:var(--accent);}
input[type=text],input[type=email],select,textarea{
  width:100%;background:var(--card2);
  border:1px solid var(--border);
  border-radius:10px;padding:0.75rem 1rem;
  color:var(--text);font-family:inherit;font-size:0.9rem;
  outline:none;transition:border-color var(--trans),box-shadow var(--trans);
  -webkit-appearance:none;appearance:none;
}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{
  border-color:var(--border-accent);
  box-shadow:0 0 0 3px rgba(0,123,255,0.1);
}
input.invalid,select.invalid,textarea.invalid{border-color:#ff4d4d!important;box-shadow:0 0 0 3px rgba(255,77,77,0.1)!important;}
input::placeholder,textarea::placeholder{color:var(--text3);}
select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a96b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;}
textarea{resize:vertical;min-height:120px;}

/* RANGE */
.range-wrap{display:flex;align-items:center;gap:1rem;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:0.75rem 1rem;}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:4px;outline:none;border:none;box-shadow:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));cursor:pointer;box-shadow:0 0 8px var(--accent-glow);}
input[type=range]:focus{box-shadow:none!important;border-color:transparent!important;}
.range-val{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;color:var(--accent);white-space:nowrap;min-width:50px;text-align:right;}

/* HINTS */
.form-hint{display:block;font-size:0.78rem;color:var(--text3);margin-top:0.4rem;line-height:1.5;}
.form-hint strong{color:var(--text2);}
.form-hint-inline{font-size:0.78rem;color:var(--text3);font-weight:400;}
.form-desc{font-size:0.82rem;color:var(--text2);line-height:1.6;margin-bottom:0.75rem;}
.form-desc strong{color:var(--text);}

/* CHAR COUNTER */
.char-counter{font-size:0.78rem;color:var(--text3);margin-top:0.5rem;transition:color var(--trans);}
.char-counter.ok{color:#4dff96;}
.char-counter.warn{color:#ffaa00;}

/* SIGNATURE */
.wl-sign-section{display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;}
.sign-wrap{display:flex;flex-direction:column;gap:0.75rem;}
.sign-header{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:0.9rem;}
.sign-header i{color:var(--accent);}
.sign-clear{background:none;border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:0.35rem 0.8rem;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;gap:5px;transition:var(--trans);}
.sign-clear:hover{border-color:#ff4d4d;color:#ff4d4d;}
#signCanvas{width:100%;max-width:100%;height:160px;background:var(--card2);border:1px solid var(--border);border-radius:12px;cursor:crosshair;touch-action:none;display:block;}
#signCanvas.signed{border-color:var(--border-accent);}
.sign-hint{font-size:0.78rem;color:var(--text3);}

/* SUBMIT */
.btn-submit{width:100%;padding:1rem;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:12px;color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--trans);letter-spacing:0.5px;}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--accent-glow);}
.btn-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* SUCCESS */
.wl-success{display:none;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;padding:4rem 2rem;}
.wl-success.show{display:flex;}
.success-icon{width:80px;height:80px;background:rgba(77,255,150,0.1);border:2px solid rgba(77,255,150,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#4dff96;animation:pop 0.5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes pop{from{transform:scale(0);}to{transform:scale(1);}}
.wl-success h2{font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:700;}
.wl-success p{color:var(--text2);max-width:500px;}
.btn-discord-link,.btn-home-link{display:inline-flex;align-items:center;gap:8px;padding:0.75rem 1.75rem;border-radius:10px;font-weight:600;font-size:0.9rem;transition:var(--trans);}
.btn-discord-link{background:#007bff;color:#fff;}
.btn-discord-link:hover{background:#0056b3;}
.btn-home-link{background:var(--card2);border:1px solid var(--border);color:var(--text);}
.btn-home-link:hover{border-color:var(--border-accent);color:var(--accent);}

/* FOOTER */
.wl-footer{text-align:center;padding:1.5rem;color:var(--text3);font-size:0.82rem;border-top:1px solid var(--border);}
.wl-footer a{color:var(--accent);}
