/* Rent-an-Arcade — Auth & Dashboard CSS */
:root{
  --bg:#06060e;--bg2:#0a0a16;--card:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.08);--text:#e8e8f0;--text2:rgba(255,255,255,.5);
  --accent:#ff6633;--green:#44ff88;--red:#ff4444;--yellow:#ffaa44;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}

/* Auth Pages */
.raa-auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.raa-auth-box{width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:36px 32px}
.raa-auth-box h1{text-align:center;margin-bottom:8px}
.raa-auth-box h2{text-align:center;font-size:1.3rem;margin-bottom:24px;font-weight:600}
.raa-logo{color:var(--text);font-size:1.1rem;font-weight:800;letter-spacing:1px;text-decoration:none}
.raa-logo:hover{text-decoration:none;color:var(--accent)}

.raa-oauth-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.raa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:8px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;text-decoration:none;transition:all .2s}
.raa-btn:hover{text-decoration:none}
.raa-btn-google{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text)}
.raa-btn-google:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}
.raa-btn-twitch{background:rgba(145,70,255,.12);border:1px solid rgba(145,70,255,.2);color:#b88aff}
.raa-btn-twitch:hover{background:rgba(145,70,255,.2)}
.raa-btn-primary{background:linear-gradient(135deg,var(--accent),#ee4422);color:#fff}
.raa-btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.raa-btn-full{width:100%}

.raa-divider{text-align:center;margin:20px 0;position:relative}
.raa-divider::before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--border)}
.raa-divider span{background:var(--bg2);padding:0 16px;position:relative;font-size:.8rem;color:var(--text2)}

.raa-field{margin-bottom:14px}
.raa-field label{display:block;font-size:.85rem;font-weight:600;color:var(--text2);margin-bottom:5px}
.raa-field input,.raa-field select,.raa-field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--text);font-size:.9rem;font-family:inherit;transition:border-color .2s}
.raa-field input:focus,.raa-field select:focus,.raa-field textarea:focus{outline:none;border-color:var(--accent)}
.raa-field input::placeholder{color:rgba(255,255,255,.25)}

.raa-check{display:flex;align-items:flex-start;gap:10px;margin:16px 0}
.raa-check input[type=checkbox]{margin-top:3px;accent-color:var(--accent)}
.raa-check label{font-size:.82rem;color:var(--text2)}

.raa-auth-switch{text-align:center;margin-top:20px;font-size:.85rem;color:var(--text2)}

.raa-alert{padding:12px 16px;border-radius:8px;font-size:.88rem;margin-bottom:16px}
.raa-alert-error{background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.2);color:#ff6666}
.raa-alert-success{background:rgba(68,255,136,.1);border:1px solid rgba(68,255,136,.2);color:var(--green)}

/* Dashboard */
.raa-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--bg2);border-bottom:1px solid var(--border)}
.raa-nav-logo{font-weight:800;font-size:1rem;letter-spacing:1px;color:var(--text);text-decoration:none}
.raa-nav-right{display:flex;align-items:center;gap:16px}
.raa-nav-user{font-size:.85rem;color:var(--text2)}
.raa-nav-link{font-size:.85rem;color:var(--text2)}
.raa-nav-link:hover{color:var(--accent)}

.raa-dash{padding:32px 24px}
.raa-dash-wrap{max-width:900px;margin:0 auto}
.raa-dash h1{font-size:1.8rem;margin-bottom:24px}

.raa-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}
.raa-card h2{font-size:1.1rem;margin-bottom:12px;font-weight:700}

.raa-muted{color:var(--text2);font-size:.88rem}

.raa-plan-info{display:flex;align-items:center;gap:20px}
.raa-plan-badge{background:linear-gradient(135deg,var(--accent),var(--yellow));color:#fff;font-weight:800;padding:8px 20px;border-radius:8px;font-size:1rem;letter-spacing:1px}
.raa-plan-info p{font-size:.88rem;color:var(--text2);margin:2px 0}

.raa-key-row{margin-bottom:10px}
.raa-key-row label{display:block;font-size:.8rem;color:var(--text2);margin-bottom:3px}
.raa-key-value{display:block;background:rgba(0,0,0,.3);padding:8px 12px;border-radius:6px;font-size:.82rem;color:var(--green);word-break:break-all;font-family:'Fira Code',monospace,monospace}

.raa-table{width:100%;border-collapse:collapse;font-size:.88rem}
.raa-table th{text-align:left;padding:8px 10px;color:var(--text2);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.raa-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.03)}

.raa-badge-green{background:rgba(68,255,136,.12);color:var(--green);padding:2px 10px;border-radius:4px;font-size:.78rem;font-weight:600}
.raa-badge-yellow{background:rgba(255,170,68,.12);color:var(--yellow);padding:2px 10px;border-radius:4px;font-size:.78rem;font-weight:600}
.raa-badge-gray{background:rgba(255,255,255,.06);color:var(--text2);padding:2px 10px;border-radius:4px;font-size:.78rem;font-weight:600}

.raa-code-block{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:16px;font-family:'Fira Code',monospace,monospace;font-size:.8rem;color:var(--text2);overflow-x:auto;line-height:1.6;white-space:pre}

@media(max-width:600px){
  .raa-auth-box{padding:28px 20px}
  .raa-dash{padding:20px 16px}
  .raa-plan-info{flex-direction:column;align-items:flex-start;gap:12px}
}