/* GameProducer Studio - Auth Styles */ #auth-screen { position: fixed; inset: 0; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 9000; } .auth-box { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 40px; width: 420px; max-width: 95vw; } .auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .auth-logo-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; } .auth-logo-name { font-size: 18px; font-weight: 600; } .auth-title { font-size: 20px; font-weight: 600; margin-bottom: 6px; } .auth-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; } .auth-field { margin-bottom: 14px; } .auth-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; } .auth-field input { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 10px 12px; color: var(--text-primary); font-family: var(--font); font-size: 13px; outline: none; transition: border-color 0.15s; } .auth-field input:focus { border-color: var(--accent); } .auth-btn { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); margin-top: 6px; transition: background 0.15s; } .auth-btn:hover { background: #6b5de6; } .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; } .auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); } .auth-switch a { color: var(--accent); cursor: pointer; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } .auth-error { background: var(--red-dim); border: 1px solid rgba(248,113,113,0.3); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; color: var(--red); margin-bottom: 14px; display: none; } .auth-success { background: var(--green-dim); border: 1px solid rgba(74,222,128,0.3); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; color: var(--green); margin-bottom: 14px; display: none; } /* User menu sidebar */ .user-menu { padding: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--accent); flex-shrink: 0; } .user-info { flex: 1; overflow: hidden; } .user-email { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-role { font-size: 10px; color: var(--accent); font-weight: 500; } .user-logout { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 4px; border-radius: 4px; } .user-logout:hover { color: var(--red); background: var(--red-dim); } /* Invite member panel */ .invite-row { display: flex; gap: 8px; margin-bottom: 14px; } .invite-row input { flex: 1; } .member-status-pending { opacity: 0.5; } .badge-pending { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--amber-dim); color: var(--amber); font-weight: 500; } .badge-active { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--green-dim); color: var(--green); font-weight: 500; } /* Permission lock */ .locked { opacity: 0.4; pointer-events: none; cursor: not-allowed; } .perm-notice { font-size: 12px; color: var(--text-muted); background: var(--bg-secondary); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }